search

google / material-design-lite

Material Design Components in HTML/CSS/JS
https://getmdl.io
Apache License 2.0
32.27k stars 5.04k forks source link

Text Field does not support implicit label association #1737

Open liddellj opened 8 years ago

liddellj commented 8 years ago

The HTML spec allows for an implicit association between a label and an input by making the input a descendant of the label. This avoids the need for an associating for attribute, which can be problematic when generating dynamic markup because element identifiers must be unique across the entire page. Using an implicit association avoids the need for id or for attributes altogether. You can work around this by generating a unique identifier when generating the markup - but that's a little inconvenient.

So instead of:

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="sample1" />
  <label class="mdl-textfield__label" for="sample1">Text...</label>
</div>

It would be convenient to be able to do this:

<div class="mdl-textfield mdl-js-textfield">
  <label class="mdl-textfield__label"><input class="mdl-textfield__input" type="text" /> Text...</label>
</div>

http://www.w3.org/TR/html5/forms.html#the-label-element

The MDL textfield does not appear to support this arrangement.

surma commented 8 years ago

That’s valid feedback. I’m not sure we can change that before v2 as we’d have to support both ways of building a textfield in our CSS, but we will definitely address this for v2.

Garbee commented 8 years ago

In playing around to try and support this, it isn't feasible.

We would be required to support two entire single-line textfield setups which would differ from each other due to positioning. It is best we focus on supporting one high-quality construction instead of two.

Overall, it is best we focus on improving the current method instead of converting to implicitness.

I'm open to ideas that don't involve separating implicit and non-implicit styling.

Un-marking for V2 and leaving open for constructive comments towards achieving the goal. Remember, please don't +1 or just tell us how much this is needed. Comments in that mindset are not constructive.

thewendee commented 8 years ago

I did a little test with just changing the outer div to a label and the inner label to a span and the presentation seemed to function just fine. Though I did test this change with NVDA (screen reader) and I didn't run into any issue I would recommend more accessibility testing since not all screen readers have the same behavior.

Original markup:

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="don">
  <label class="mdl-textfield__label" for="don">Don Knotts</label>
</div>

Changing markup:

<label class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" id="norman">
  <span class="mdl-textfield__label">Norman Fell</span>
</label>
Garbee commented 8 years ago

Ah, I didn't think to try the label as the container element itself.

The a11y isn't the issue here, but the fact that doing the recommended markup div > label > input caused the input to not even display for users. Since we are just enhancing the default elements, a11y doesn't change.

I'll verify the setup works in a bit. If it does we can close this up now.