Switch input labels to use <label> element

Heya @hharnisc @alvarezmelissa87 @stevemdixon!

Just a heads up on an axe-core error I’m seeing while adding the tests - it looks like we’re using a div element for the input labels instead of a <label>

const renderLabel = ({ label }) => (
  label ? (
    <div style={labelStyle}>
      <Text>{label}</Text>
    </div>
  ) : null
);

I wonder if instead of using a <Text> component for this we could use the native <label> component? That way screen readers have an easier time knowing which label is associated to which input.

Here’s an example of how we might do that:

const renderLabel = ({ label }) => (
  label ? (
    <label for={id}>{label}</label>
  ) : null
);

The only thing tricky about this is that I believe we’ll need a unique id for each instance of the input in order to associate the label with a particular <input>

[hharnisc]

I think it’s time we create a Label component 😄

[hharnisc]

Seems like a great idea to always have a label (visible or otherwise!). Pretty cool that the label can be associated with the input with nesting too!

I think it will keep things simpler if we use the for and id method since they’re decoupled and give us some freedom around how to show and hide components.