fix: dot menu accessibility (#23133)

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
+                for (let i = 0; i < 3; i++) {
-                if (!emojiPickerEnabled) {
+                    // * Verify focus is on the reactions button
-                    // * Verify focus is on the actions button
+                    cy.get(`#recent_reaction_${i}`).should('have.class', 'emoticon--post-menu').and('have.attr', 'aria-label');
-                    cy.get(`#CENTER_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'more');
                     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
-                    // * Verify focus is on the more button
+                cy.get(`#CENTER_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'more');
-                    cy.get(`#CENTER_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'More');
+                cy.focused().tab();
-                    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 more button
-                    // * Verify focus is on the actions button
+                cy.get(`#RHS_COMMENT_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'more');
-                    cy.get(`#RHS_COMMENT_button_${postId}`).should('be.focused').and('have.attr', 'aria-label', 'More');
+                cy.focused().tab({shift: true});
-                    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
+                // * Verify focus is on most recent action
-                if (!emojiPickerEnabled) {
+                cy.get('#recent_reaction_0').should('have.class', 'emoticon--post-menu').and('have.attr', 'aria-label');
-                    // * Verify focus is on the actions button
+                cy.focused().tab({shift: true});
-                    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 the time
                 cy.get(`#RHS_COMMENT_time_${postId}`).should('be.focused');

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": <DotsHorizontalIcon
         size={16}
       />,

webapp/channels/src/components/dot_menu/dot_menu.tsx

@@ -497,7 +497,7 @@ export class DotMenuClass extends React.PureComponent<Props, State> {
                     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: <DotsHorizontalIcon size={16}/>,
                 }}
                 menu={{

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.",