Page MenuHomePhabricator

Certain widgets in a HorizontalLayout don't get label referred
Open, LowPublic

Description

HorizontalLayout, as of v0.21.1, can result in DOM combinations, where it's label isn't provided for label-less widgets inside to screen readers.
If devs gonna put several widgets (RadioInput-, CheckboxInputWidget) in a HorizontalLayout the widgets should

  • either be wrapped by (doesn't make sense in our common use case) or
  • refer to the FieldLayout-Header label with aria-labelledby if there are no specific labels present.

See also https://stackoverflow.com/questions/12164617/how-to-have-one-label-for-multiple-select-boxes#12165447

Event Timeline

I don't understand what you mean here. HorizontalLayout by itself has no meaning; it's basically a hack so that people who are afraid of CSS don't have to write .foo { display: inline-block; } to display things on one line. Can you provide a code sample which results in poor accessibility and where we could magically make things better?

From the description:

HorizontalLayout, as of v0.21.1, doesn't provide a clear label for screen readers.

As far as I know HorizontalLayout doesn't provide a label at all (nor does it seem it needs to, I might be wrong).

That was not sufficiently outlined. The current HorizontalLayout demo is wrapped in a FieldLayout with a label. But that label doesn't apply to the various elements in the HorizontalLayout by for example aria-labelledby.
It's not HorizontalLayout's shortcoming here.

It's not HorizontalLayout's shortcoming here.

Mind updating the task title and description?

It's not an simple combination.

Volker_E renamed this task from HorizontalLayout should provide widgets with label to Certain widgets in a HorizontalLayout don't get label referred.May 10 2017, 4:56 PM
Volker_E triaged this task as Low priority.
Volker_E updated the task description. (Show Details)

I don't think it's worth inventing something complicated for HorizontalLayout until we run into this problem in real usage. If you just want accessibility tools to stop complaining about the demo page, we could change the HorizontalLayout example to have FieldLayouts inside rather than plain RadioInputWidget/CheckboxInputWidget etc., or to associate a LabelWidget with every RadioInputWidget/CheckboxInputWidget.