search

classtranscribe / FrontEnd

The React + Redux Frontend for ClassTranscribe
https://classtranscribe.illinois.edu
Other
25 stars 27 forks source link

Wrap Label around target element #737

Closed angrave closed 6 months ago

angrave commented 7 months ago

Labels in ClassTranscribe typically have a htmlFor but A11y best practice is to also wrap (nest) the target control inside the label element. i.e., <label htmlFor='abc'><input id='abc'>...</>some text</label> Note this structural change may impact styling of the (new) inner element so check/fix if there are style sheets where the original control style is identified as a child of a parent container.

src/screens/Admin/More/DownloadLogs.jsx Line 43:7: Form label must have ALL of the following types of associated control: nesting, id jsx-a11y/label-has-for

src/screens/Admin/Terms/TermEditing.jsx Line 135:15: Form label must have ALL of the following types of associated control: nesting, id jsx-a11y/label-has-for

src/screens/Watch/Components/Menus/SettingMenu/MenuRadio.jsx Line 24:11: Form label must have ALL of the following types of associated control: nesting, id jsx-a11y/label-has-for

tdy commented 6 months ago

It looks like this was originally recommended by jsx-a11y/label-has-for, but that rule is now deprecated: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/commit/2a490286937fa8eba3ed213a4637edec932748de

The superseding rule jsx-a11y/label-has-associated-form-control allows either wrapped (implicit) or targeted (explicit) labels.

W3C recommends explicit labels when possible:

Generally, explicit labels are better supported by assistive technology.