1900102 - Switch moz-radio markup to use input + label rather than an input wrapped in a label

Status: RESOLVED FIXED

(Toolkit :: UI Widgets, task)

Description

[Hanna Jones [:hjones]]

Based on this review comment on the initial patch it sounds like this markup:

<input type="radio" name="greeting" value="Hello" id="hello" />
<label for="hello">Hello</label>

works better with certain screen readers compared with having the label wrap the input. Based on that feedback we should update the markup. There are a couple of questions we should get answered that may impact the scope of the bug and/or represent other bugs we should file:

• Is it important to have the space between the label and the input be clickable? This was the main motivation for using the input wrapped in a label markup. There are other ways of achieving this, though they are less clean/tidy.
• Is this an issue that needs to be addressed with our moz-toggle and moz-checkbox inputs as well, since they use similar markup?

Comment 1

[Hanna Jones [:hjones]]

Attachment: Bug 1900102 - switch moz-radio styles to avoid flexbox to fix NVDA issue r=#recomp-reviewers,#accessibility-frontend-reviewers

This change should make it so that screen readers only announce the label once while maintaining the ability for mouse users to hover/click on the whitespace around the label text.

Comment 2

[Nathan LaPré]

Attachment: Bug 1900102: Use inline styling to group button, label for SRs, r?hjones

This revision adjusts the styling of moz-radio to avoid block, flex display
styling that can cause screen readers to perceive the button, label as "on
different lines" even though they are grouped visually. This revision maintains
the ability to click the interstice between the button and the label.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2a8c683b24d6
switch moz-radio styles to avoid flexbox to fix NVDA issue r=reusable-components-reviewers,accessibility-frontend-reviewers,desktop-theme-reviewers,dao,tgiles

Comment 4

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/2a8c683b24d6