1903407 - Move away from using display: flex in moz-checkbox to improve experience for NVDA users

Status: NEW

(Toolkit :: UI Widgets, task)

Description

[Hanna Jones [:hjones]]

In bug 1900102 we ended up changing moz-radio styles to achieve the same layout without using flexbox. This fixed an issue where NVDA in browse mode would read the checked state of the input and the label separately without clearly associating the two. This is due to the fact that NVDA interprets input elements wrapped by a flex container to be on "different lines".

moz-checkbox uses largely similar styles to moz-radio and seems to have the same issue in NVDA where the input and label are not properly associated. We should switch to using styles similar to what was implemented in bug 1900102 to fix this issue.

Comment 1

[Mark Striemer [:mstriemer]]

This could be simplified by solving this in the common input helpers in bug 1900122 and its related refactoring bugs