MM-62046 Associate most labels with controls and enable label-has-associated-control ESLint rule (#29510)

* Remove label from add_user_to_channel_modal.tsx

The label isn't needed here because it was incorrectly used for error
text. I had to add the display: block to the .modal__error class to
ensure the top margin was the same as before, but I could remove the
font-weight from that class since it was only needed to counteract
the weight that Bootstrap adds for labels.
:

* Remove label from bleve_settings.tsx and replace with SettingSet

It doesn't seem correct to use a label here because it isn't tied to a
single form field. Since this component is a set of fields (a fieldset,
if you will) that looks like a setting, it seemed like a good place to
use SettingSet.

* Remove label from brand_image_setting.tsx, replace with SettingSet, and improve a11y of upload button

Like the last commit for BleveSettings, this setting is multiple inputs,
so it makes more sense as a fieldset/SettingSet.

While doing that, I also changed how the file upload button in
BrandImageSetting works because the new HTML broke how it worked before.
Previously, we overlayed an transparent file input over the button for it,
but the sizing for that got messed up, and that causes some weird
accessibility and breaks some things like hover effects. Instead, the
file input is now fully hidden, and clicking on the button triggers the
file input programatically. The behaviour is otherwise the same, but the
button now shows the hover style and there's only one keyboard focus for
the button.

* Remove some more labels from PluginManagement and use SettingSet there

* Add for attribute to labels in compliance_reports.tsx

* Use SettingSet and add the for attribute to another label in DatabaseSettings

* Use SettingSet in ElasticsearchSettings

* Add for attribute to label in GroupProfile

* Don't use label for help text in TeamEditionRightPanel

For this, I had to add a new CSS class to make the element appear as if
it was a label element as affected by Bootstrap. There's likely some
cases that this won't work, but it applies the same margin and
font-weight.

* Don't use label for help text in TrialBanner

* Don't use label for a heading in PasswordSettings

* Don't use label element in table in ChannelModeration

This text is more like a legend element in SettingSet, but I didn't use
that because it's in a table. This could possibly be given its own
CSS class.

* Don't use label element for error text in AdvancedTextEditor and MessageSubmitError

* Don't use label for help text and add for attribute in RenameChannelModal

* Don't use label for error text in SelectTeam

* Add for attribute to labels in various components

* Turn jsx-a11y/label-has-associated-control to an error

* Fix E2E test
Этот коммит содержится в:
Harrison Healey
2024-12-17 16:50:06 -05:00
коммит произвёл GitHub
родитель 0e4e7ca0b9
Коммит f11ed97a5c
40 изменённых файлов: 1373 добавлений и 1568 удалений

Просмотреть файл

@@ -29,7 +29,7 @@
"jsx-a11y/iframe-has-title": "warn",
"jsx-a11y/img-redundant-alt": "warn",
"jsx-a11y/interactive-supports-focus": "warn",
"jsx-a11y/label-has-associated-control": "warn",
"jsx-a11y/label-has-associated-control": "error",
"jsx-a11y/media-has-caption": "warn",
"jsx-a11y/mouse-events-have-key-events": "warn",
"jsx-a11y/no-access-key": "error",