Text Field labels not WCAG compliant

[abradley2]

From the demo in the docs, it appears that labels for text fields don't correctly identify the text input they correspond to.

Normally there will be label for="text-field-id" and then a text field with that ID. It doesn't appear there's a way to specify this pattern in a compliant way

[aforemny]

I can reproduce this with the following example:

<div>
    <input/>
</div>

As you've stated, this example does not raise the accessibility concern:

<label for="foo"/>
<input id="foo"/>

On the other hand, this should work as well and is what upstream does:

<label>
  <input />
</label>

We cannot easily do that, because we are wrapping MDC Web components in custom elements and Elm does not support the is attribute.

I would much rather have a solution that does not require the user to specify IDs as that is less overhead.

I will take a look if we can modify the DOM in a way so that we can also wrap the native control inside a label.

[abradley2]

@aforemny
What do you think about this approach? It would allow binding "additionalAttributes" to the label and input element.

So we can set id on the span element that is used as a label, and specify it is the intended label via aria-labelledby on the input.

TextField.config
  |> TextField.setLabelAttributes [ id "my-label" ]
  |> TextField.setInputAttributes [ attribute "aria-labelledby" "my-label" ]

I did notice there is actually a ariaLabelAttr setting, but it appears tied to fullWidth, why is this?

ariaLabelAttr : Config msg -> Maybe (Html.Attribute msg)
ariaLabelAttr (Config { fullwidth, placeholder, label }) =
    if fullwidth then
        Maybe.map (Html.Attributes.attribute "aria-label") label

    else
        Nothing

[tillydray]

On the other hand, this should work as well and is what upstream does:

<label>
  <input />
</label>

You probably know, but this is called implicit labeling. Per w3.org's tutorial on Labeling Controls,

Generally, explicit labels are better supported by assistive technology.

So as far as possible we should use explicit labeling to be as accessible as possible.