Remove wrapping label element to improve accessibility #6461
Conversation
| @@ -121,7 +121,7 @@ export default class Input<T: ?string | ?number> extends React.PureComponent<Inp | |||
|
|
|||
| return ( | |||
| <Fragment> | |||
| <label | |||
| <div | |||
There was a problem hiding this comment.
as far as i see, the labelRef prop of this component is only used by the ColorPicker and SingleAutoComplete to position their popover. so it would be okay in the core to change this as the other components dont need a <label> element.
but if we change this, we should rename labelClass and labelRef. maybe to something like inputContainerClass?
There was a problem hiding this comment.
regarding to the type of the ref - i think i would just use ElementRef<*> then 🙂
There was a problem hiding this comment.
@niklasnatter I'm not completely sure about your comment. Can we remove the labelRef? Or what is it used for?
There was a problem hiding this comment.
the labelRef is used by the SingleAutoComplete to display the popover at the correct position. so we should rename it to something like inputContainerRef and use that in the SingleAutoComplete 🙂
|
Reminder for myself we need to check the checkbox and the checkbox toggler type work still like expected. |
alexander-schranz
force-pushed
the
bugfix/duplicate-input-label
branch
3 times, most recently
from
4c9ad50
to
f98ff64
Compare
|
@alexander-schranz Is this ready for review? 🙂 |
|
@niklasnatter look like something is still failing in the tests. But if you want to have a look at it or take it over its fine for me :) |
niklasnatter
force-pushed
the
bugfix/duplicate-input-label
branch
from
f98ff64
to
41d505a
Compare
niklasnatter
changed the title
What's in this PR?
Some input elements in the admin interface have two associated label elements. Besides the visible label (with a
for="/xyz"), input elements are also nested within a label element.Why?
This enclosing label is problematic because icons and buttons within the wrapper are added to input name. This problem is particularly problematic for assistive technologies such as screen readers.
To Do
labelRefI am not quite sure what is a good solution to adjust the typing accordingly. Suggestions are very welcome!