google/material-design-lite

Text Field does not support implicit label association

Open

#1737 opened on Oct 13, 2015

View on GitHub
 (4 comments) (0 reactions) (0 assignees)HTML (32,173 stars) (4,926 forks)batch import
Textfieldhelp wantedresearch

Description

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.

Contributor guide

Tech stack
htmlcssjavascript
Domain
frontendaccessibility
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
HTML label elementCSS for positioningJavaScript event handling
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the existing Text Field component implementation in material design lite, specifically the JavaScript and CSS that handle the label and input elements. Look for how the `for` attribute is currently used and how to support implicit association when input is nested inside label. Check comments on issue #1737 for any prior discussion or attempted solutions. The HTML spec reference is provided; ensure the implementation aligns with it.