diff --git a/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js b/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js index 4496aa9ff8..3ecf92ca94 100644 --- a/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js +++ b/e2e-tests/cypress/tests/integration/channels/accessibility/accessibility_post_spec.js @@ -18,7 +18,6 @@ describe('Verify Accessibility Support in Post', () => { let otherUser; let testTeam; let testChannel; - let emojiPickerEnabled; before(() => { cy.apiInitSetup().then(({team, channel, user}) => { @@ -33,10 +32,6 @@ describe('Verify Accessibility Support in Post', () => { cy.apiAddUserToChannel(testChannel.id, otherUser.id); }); }); - - cy.apiGetConfig().then(({config}) => { - emojiPickerEnabled = config.ServiceSettings.EnableEmojiPicker; - }); }); }); @@ -179,17 +174,10 @@ describe('Verify Accessibility Support in Post', () => { cy.get(`#CENTER_time_${postId}`).should('be.focused'); cy.focused().tab(); - // eslint-disable-next-line no-negated-condition - if (!emojiPickerEnabled) { - // * Verify focus is on the actions button - cy.get(`#CENTER_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'more'); + for (let i = 0; i < 3; i++) { + // * Verify focus is on the reactions button + cy.get(`#recent_reaction_${i}`).should('have.class', 'emoticon--post-menu').and('have.attr', 'aria-label'); cy.focused().tab(); - } else { - for (let i = 0; i < 3; i++) { - // * Verify focus is on the reactions button - cy.get(`#recent_reaction_${i}`).should('have.class', 'emoticon--post-menu').and('have.attr', 'aria-label'); - cy.focused().tab(); - } } // * Verify focus is on the reactions button @@ -200,15 +188,17 @@ describe('Verify Accessibility Support in Post', () => { cy.get(`#CENTER_flagIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'save'); cy.focused().tab(); + // * Verify focus is on message actions button + cy.get(`#CENTER_actions_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'actions'); + cy.focused().tab(); + // * Verify focus is on the comment button cy.get(`#CENTER_commentIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'reply'); cy.focused().tab(); - if (emojiPickerEnabled) { - // * Verify focus is on the more button - cy.get(`#CENTER_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'More'); - cy.focused().tab(); - } + // * Verify focus is on the more button + cy.get(`#CENTER_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'more'); + cy.focused().tab(); // * Verify focus is on the post text cy.get(`#postMessageText_${postId}`).should('be.focused').and('have.attr', 'aria-readonly', 'true'); @@ -244,11 +234,13 @@ describe('Verify Accessibility Support in Post', () => { cy.get(`#rhsPostMessageText_${postId}`).should('be.focused').and('have.attr', 'aria-readonly', 'true'); cy.focused().tab({shift: true}); - if (emojiPickerEnabled) { - // * Verify focus is on the actions button - cy.get(`#RHS_COMMENT_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'More'); - cy.focused().tab({shift: true}); - } + // * Verify focus is on the more button + cy.get(`#RHS_COMMENT_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'more'); + cy.focused().tab({shift: true}); + + // * Verify focus is on message actions button + cy.get(`#RHS_COMMENT_actions_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'actions'); + cy.focused().tab({shift: true}); // * Verify focus is on the save icon cy.get(`#RHS_COMMENT_flagIcon_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'save'); @@ -258,15 +250,9 @@ describe('Verify Accessibility Support in Post', () => { cy.get(`#RHS_COMMENT_reaction_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'add reaction'); cy.focused().tab({shift: true}); - // eslint-disable-next-line no-negated-condition - if (!emojiPickerEnabled) { - // * Verify focus is on the actions button - cy.get(`#RHS_COMMENT_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'more'); - cy.focused().tab({shift: true}); - } else { - cy.get('#recent_reaction_0').should('have.class', 'emoticon--post-menu').and('have.attr', 'aria-label'); - cy.focused().tab({shift: true}); - } + // * Verify focus is on most recent action + cy.get('#recent_reaction_0').should('have.class', 'emoticon--post-menu').and('have.attr', 'aria-label'); + cy.focused().tab({shift: true}); // * Verify focus is on the time cy.get(`#RHS_COMMENT_time_${postId}`).should('be.focused'); diff --git a/webapp/channels/src/components/dot_menu/__snapshots__/dot_menu.test.tsx.snap b/webapp/channels/src/components/dot_menu/__snapshots__/dot_menu.test.tsx.snap index 490e16e2da..93cfa8e998 100644 --- a/webapp/channels/src/components/dot_menu/__snapshots__/dot_menu.test.tsx.snap +++ b/webapp/channels/src/components/dot_menu/__snapshots__/dot_menu.test.tsx.snap @@ -9,7 +9,7 @@ Object { aria-controls="CENTER_dropdown_post_id_1" aria-expanded="false" aria-haspopup="true" - aria-label="Actions" + aria-label="more" class="post-menu__item" data-testid="PostDotMenu-Button-post_id_1" id="CENTER_button_post_id_1" @@ -34,7 +34,7 @@ Object { aria-controls="CENTER_dropdown_post_id_1" aria-expanded="false" aria-haspopup="true" - aria-label="Actions" + aria-label="more" class="post-menu__item" data-testid="PostDotMenu-Button-post_id_1" id="CENTER_button_post_id_1" @@ -121,7 +121,7 @@ exports[`components/dot_menu/DotMenu should match snapshot, on Center 1`] = ` } menuButton={ Object { - "aria-label": "Actions", + "aria-label": "more", "children": , diff --git a/webapp/channels/src/components/dot_menu/dot_menu.tsx b/webapp/channels/src/components/dot_menu/dot_menu.tsx index be3d6afa13..255d05a466 100644 --- a/webapp/channels/src/components/dot_menu/dot_menu.tsx +++ b/webapp/channels/src/components/dot_menu/dot_menu.tsx @@ -497,7 +497,7 @@ export class DotMenuClass extends React.PureComponent { class: classNames('post-menu__item', { 'post-menu__item--active': this.props.isMenuOpen, }), - 'aria-label': formatMessage({id: 'post_info.dot_menu.tooltip.actions', defaultMessage: 'Actions'}), + 'aria-label': formatMessage({id: 'post_info.dot_menu.tooltip.more', defaultMessage: 'More'}).toLowerCase(), children: , }} menu={{ diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json index c18988305b..c42d33f2fc 100644 --- a/webapp/channels/src/i18n/en.json +++ b/webapp/channels/src/i18n/en.json @@ -4481,7 +4481,6 @@ "post_info.comment_icon.tooltip.reply": "Reply", "post_info.copy": "Copy Text", "post_info.del": "Delete", - "post_info.dot_menu.tooltip.actions": "Actions", "post_info.dot_menu.tooltip.more": "More", "post_info.edit": "Edit", "post_info.edit.aria_label": "Select to restore an old message.",