From 883711c72db49bbc9abe86bde320ae146dd99730 Mon Sep 17 00:00:00 2001 From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com> Date: Mon, 12 May 2025 09:14:20 -0400 Subject: [PATCH] [MM-62973][MM-63028][MM-63034][MM-63027] Various accessibility fixes around Browse Channels modal (#30922) * [MM-62973] Fix order of Close button and other buttons in the header * [MM-63028] Add aria-live status area when searching for channels * [MM-63027] Add announcement that channel is joined * [MM-63034] Add role=checkbox and reformat HTML to have correct custom checkbox code * Update snapshots from generic_modal change * PR feedback * PR feedback * PR feedback --- .../channel/browse_public_channels_spec.ts | 4 +- .../accessibility_modals_dialogs_spec.ts | 4 +- .../searchable_channel_list.test.tsx.snap | 8 +- .../channel_notifications_modal.test.tsx.snap | 192 +++++++++--------- .../marketplace_modal.test.tsx.snap | 154 +++++++++++++- .../components/searchable_channel_list.tsx | 40 +++- webapp/channels/src/i18n/en.json | 4 +- .../__snapshots__/generic_modal.test.tsx.snap | 6 +- .../src/generic_modal/generic_modal.tsx | 19 +- 9 files changed, 310 insertions(+), 121 deletions(-) diff --git a/e2e-tests/cypress/tests/integration/channels/channel/browse_public_channels_spec.ts b/e2e-tests/cypress/tests/integration/channels/channel/browse_public_channels_spec.ts index 29c83de595..f41b237d96 100644 --- a/e2e-tests/cypress/tests/integration/channels/channel/browse_public_channels_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/channel/browse_public_channels_spec.ts @@ -20,12 +20,12 @@ function verifyNoChannelToJoinMessage(isVisible) { function ensureHideJoinedCheckboxEnabled(shouldBeChecked) { cy.get('#hideJoinedPreferenceCheckbox').then(($checkbox) => { cy.wrap($checkbox).findByText('Hide Joined').should('be.visible'); - cy.wrap($checkbox).find('button').invoke('attr', 'class').then(($classList) => { + cy.wrap($checkbox).find('div.get-app__checkbox').invoke('attr', 'class').then(($classList) => { if ($classList.split(' ').includes('checked') ^ shouldBeChecked) { // We click on the button only when the XOR operands do not match // e.g. checkbox is checked, but should not be checked; and vice-versa cy.wrap($checkbox).click(); - cy.wrap($checkbox).find('button').should(`${shouldBeChecked ? '' : 'not.'}have.class`, 'checked'); + cy.wrap($checkbox).find('div.get-app__checkbox').should(`${shouldBeChecked ? '' : 'not.'}have.class`, 'checked'); } }); }); diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_modals_dialogs_spec.ts b/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_modals_dialogs_spec.ts index 9ae67a9b1a..5f81f65b83 100644 --- a/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_modals_dialogs_spec.ts +++ b/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_modals_dialogs_spec.ts @@ -120,8 +120,8 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => { // # Hide already joined channels cy.findByText('Hide Joined').click(); - // # Focus on the Create Channel button and TAB four time - cy.get('#createNewChannelButton').focus().tab().tab().tab().tab(); + // # Focus on the Create Channel button and TAB five time + cy.get('#createNewChannelButton').focus().tab().tab().tab().tab().tab(); // * Verify channel name is highlighted and reader reads the channel name and channel description cy.get('#moreChannelsList').within(() => { diff --git a/webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap b/webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap index fa68f91cae..d920d319dc 100644 --- a/webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap +++ b/webapp/channels/src/components/__snapshots__/searchable_channel_list.test.tsx.snap @@ -121,11 +121,15 @@ exports[`components/SearchableChannelList should match init snapshot 1`] = ` /> +
-
@@ -569,6 +553,22 @@ Object {
+
-
@@ -1211,6 +1195,22 @@ Object {
+
-
@@ -1572,6 +1556,22 @@ Object {
+
-
@@ -2152,6 +2136,22 @@ Object {
+
-
@@ -2732,6 +2716,22 @@ Object {
+
+
+
+
+
+
+
+ {
{joinViewChannelButton} + {this.state.joiningChannel === channel.id && !this.isMemberOfChannel(channel.id) && ( + + + + )}
); @@ -530,13 +544,20 @@ export class SearchableChannelList extends React.PureComponent {
{ + e.stopPropagation(); + if (e.key === 'Enter' || e.key === ' ') { + this.handleChecked(); + } + }} + role='checkbox' + aria-checked={this.props.rememberHideJoinedChannelsChecked} + aria-label={this.props.intl.formatMessage({id: 'more_channels.hide_joined_channels', defaultMessage: 'Hide joined channels'})} + tabIndex={0} > - +
{ const dropDownContainer = (
{channelCountLabel} + {this.props.isSearch && + + {channelCountLabel} + + }
{channelDropdown} {hideJoinedPreferenceCheckbox} diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json index cf085c98cb..c7e202f0d7 100644 --- a/webapp/channels/src/i18n/en.json +++ b/webapp/channels/src/i18n/en.json @@ -4499,9 +4499,9 @@ "more_channels.count_zero": "0 Results", "more_channels.create": "Create New Channel", "more_channels.hide_joined": "Hide Joined", - "more_channels.hide_joined_checked": "Hide joined channels checkbox, checked", - "more_channels.hide_joined_not_checked": "Hide joined channels checkbox, not checked", + "more_channels.hide_joined_channels": "Hide joined channels", "more_channels.joined": "Joined", + "more_channels.joinedChannel": "Joined channel {channelName}", "more_channels.membership_indicator": "Membership Indicator: Joined", "more_channels.next": "Next", "more_channels.noArchived": "No archived channels", diff --git a/webapp/platform/components/src/generic_modal/__snapshots__/generic_modal.test.tsx.snap b/webapp/platform/components/src/generic_modal/__snapshots__/generic_modal.test.tsx.snap index bdb20cb19d..cd87f392de 100644 --- a/webapp/platform/components/src/generic_modal/__snapshots__/generic_modal.test.tsx.snap +++ b/webapp/platform/components/src/generic_modal/__snapshots__/generic_modal.test.tsx.snap @@ -39,6 +39,9 @@ exports[`GenericModal should match snapshot for base case 1`] = `
+
-
= ({ dataTestId, delayFocusTrap, }) => { + const intl = useIntl(); + // Create a ref for the modal container const containerRef = useRef(null); @@ -290,7 +292,7 @@ export const GenericModal: React.FC = ({ className='GenericModal__wrapper GenericModal__wrapper-enter-key-press-catcher' > {showHeader && ( - +
{compassDesign && ( <> @@ -306,6 +308,19 @@ export const GenericModal: React.FC = ({
)}
+ {showCloseButton && ( + + )} )}