From f11ed97a5c31e23d88ba110b82b4ceccab60a997 Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Tue, 17 Dec 2024 16:50:06 -0500 Subject: [PATCH] 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 --- .../ui_and_api/customization_spec.js | 2 +- .../add_user_to_channel_modal.test.tsx.snap | 4 +- .../add_user_to_channel_modal.tsx | 9 +- .../bleve_settings.test.tsx.snap | 110 +- .../database_settings.test.tsx.snap | 39 +- .../elasticsearch_settings.test.tsx.snap | 108 +- .../admin_console/bleve_settings.tsx | 38 +- .../brand_image_setting.tsx | 72 +- .../compliance_reports/compliance_reports.tsx | 10 +- .../admin_console/database_settings.tsx | 34 +- .../admin_console/elasticsearch_settings.tsx | 38 +- .../__snapshots__/group_profile.test.tsx.snap | 3 + .../group_details/group_profile.test.tsx | 1 + .../group_details/group_profile.tsx | 8 +- .../team_edition/team_edition_right_panel.tsx | 31 +- .../trial_banner/trial_banner.tsx | 19 +- .../admin_console/password_settings.tsx | 5 +- .../plugin_management.test.tsx.snap | 2134 ++++++++--------- .../plugin_management/plugin_management.tsx | 98 +- .../channel_moderation.test.tsx.snap | 10 +- .../channel/details/channel_moderation.tsx | 5 +- .../advanced_text_editor.scss | 5 - .../advanced_text_editor.tsx | 4 +- .../src/components/integrations/bots/bot.tsx | 6 +- .../src/components/message_submit_error.tsx | 5 +- .../rename_channel_modal.test.tsx.snap | 2 + .../rename_channel_modal.tsx | 14 +- .../__snapshots__/select_team.test.tsx.snap | 8 +- .../components/select_team/select_team.tsx | 6 +- .../manage_languages/manage_languages.tsx | 1 + .../custom_theme_chooser.test.tsx.snap | 2 + .../custom_theme_chooser.tsx | 10 +- .../general/user_settings_general.tsx | 31 +- .../user_access_token_section.tsx | 6 +- .../security/user_settings_security.tsx | 15 +- .../channels/src/sass/components/_modal.scss | 3 +- .../src/sass/routes/_admin-console.scss | 22 +- .../channels/src/sass/routes/_settings.scss | 7 + webapp/channels/src/sass/routes/_signup.scss | 2 +- .../configs/.eslintrc-react.json | 2 +- 40 files changed, 1367 insertions(+), 1562 deletions(-) diff --git a/e2e-tests/cypress/tests/integration/channels/system_console/ui_and_api/customization_spec.js b/e2e-tests/cypress/tests/integration/channels/system_console/ui_and_api/customization_spec.js index 75a064575287..d956613d9b83 100644 --- a/e2e-tests/cypress/tests/integration/channels/system_console/ui_and_api/customization_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/system_console/ui_and_api/customization_spec.js @@ -36,7 +36,7 @@ describe('Customization', () => { cy.findByTestId('CustomBrandImage').should('be.visible').within(() => { // * Verify that setting is visible and matches text content - cy.get('label').should('be.visible').and('have.text', 'Custom Brand Image:'); + cy.get('legend').should('be.visible').and('have.text', 'Custom Brand Image:'); // * Verify that help setting is visible and matches text content const contents = 'Customize your user experience by adding a custom image to your login screen. Recommended maximum image size is less than 2 MB.'; diff --git a/webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap b/webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap index 43b5ad4745d5..02d56a94d4ff 100644 --- a/webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap +++ b/webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap @@ -95,9 +95,7 @@ exports[`components/AddUserToChannelModal should match snapshot 1`] = ` value="" /> -
-
-
+
{this.state.submitError} - + ); } else if (targetUserIsMemberOfSelectedChannel) { errorMsg = ( - + ); } } @@ -317,7 +317,6 @@ export default class AddUserToChannelModal extends React.PureComponent
{errorMsg} -
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap index 5c1b0d187369..f0e6fdd6c7d4 100644 --- a/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap +++ b/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap @@ -57,43 +57,36 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = ` setByEnv={false} value="" /> -
- + } + >
-
- - } - createJobHelpText={ - - } - disabled={true} - getExtraInfoText={[Function]} - jobType="bleve_post_indexing" - /> -
+ + } + createJobHelpText={ + + } + disabled={true} + getExtraInfoText={[Function]} + jobType="bleve_post_indexing" + />
-
+ -
- + } + >
-
- - } - createJobHelpText={ - - } - disabled={false} - getExtraInfoText={[Function]} - jobType="bleve_post_indexing" - /> -
+ + } + createJobHelpText={ + + } + disabled={false} + getExtraInfoText={[Function]} + jobType="bleve_post_indexing" + />
-
+ -
- + } + >
-
- - } - /> -
+ + } + />
-
+