[MM-61646]: Added logic to correctly give accessible name to channel header button (#29788)

* [MA-32]: Added logic to correctly give accessible name to channel header button

* [MA-32]: Fixed id name

* [MA-32]: Fixed failing e2e test case

* [MA-32]: Updated the aria-label attribute

e2e-tests/cypress/tests/integration/channels/channel/channel_header_modal_spec.js

@@ -30,7 +30,7 @@ describe('Channel Settings - Channel Header', () => {
             cy.visit(`/${testTeam.name}/channels/${channel.name}`);
 
             // # Click on the channel name in the channel header to open the channel menu options
-            cy.get('[aria-label="channel menu"]').click();
+            cy.get(`[aria-label="${channel.name.split('-').join(' ')} channel menu"]`).click();
 
             // # Select the "Edit Channel Header" option from the dropdown
             cy.findByText('Edit Channel Header').click();

webapp/channels/src/components/channel_header/channel_header_title.tsx

@@ -11,6 +11,7 @@ import type {UserProfile} from '@mattermost/types/users';
 
 import {Client4} from 'mattermost-redux/client';
 import {getCurrentChannel} from 'mattermost-redux/selectors/entities/channels';
+import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
 
 import {getIsRhsOpen} from 'selectors/rhs';
 
@@ -41,6 +42,7 @@ const ChannelHeaderTitle = ({
     const [showTooltip, setShowTooltip] = useState(false);
     const intl = useIntl();
     const channel = useSelector(getCurrentChannel);
+    const currentUser = useSelector(getCurrentUser);
 
     const headerItemRef = useRef<HTMLElement | null>(null);
     const isRHSOpen = useSelector(getIsRhsOpen);
@@ -118,6 +120,20 @@ const ChannelHeaderTitle = ({
         );
     }
 
+    const personalChannelHeaderAriaLabel = intl.formatMessage({
+        id: 'channel_header.directchannel',
+        defaultMessage: '{displayName} (you) Channel Menu',
+    }, {
+        displayName: channel.display_name,
+    });
+
+    const othersChannelHeaderAriaLabel = intl.formatMessage({
+        id: 'channel_header.otherchannel',
+        defaultMessage: '{displayName} Channel Menu',
+    }, {
+        displayName: channel.display_name,
+    });
+
     return (
         <div className='channel-header__top'>
             <ChannelHeaderTitleFavorite/>
@@ -142,7 +158,9 @@ const ChannelHeaderTitle = ({
                         <button
                             id='channel_header.menuAriaLabel'
                             className={classNames('channel-header__trigger style--none', {active: titleMenuOpen})}
-                            aria-label={intl.formatMessage({id: 'channel_header.menuAriaLabel', defaultMessage: 'Channel Menu'}).toLowerCase()}
+                            aria-label={
+                                (isDirect && currentUser.id === dmUser?.id) ? personalChannelHeaderAriaLabel.toLowerCase() : othersChannelHeaderAriaLabel.toLowerCase()
+                            }
                             aria-expanded={titleMenuOpen}
                             aria-controls='channelHeaderDropdownMenu'
                         >
@@ -166,11 +184,15 @@ const ChannelHeaderTitle = ({
                             <span
                                 id='channelHeaderDropdownIcon'
                                 className='icon icon-chevron-down header-dropdown-chevron-icon'
+                                aria-hidden='true'
                             />
                         </button>
                     </strong>
                 </div>
-                <ChannelHeaderDropdown/>
+                <ChannelHeaderDropdown
+                    ariaLabel={
+                        (isDirect && currentUser.id === dmUser?.id) ? personalChannelHeaderAriaLabel.toLowerCase() : othersChannelHeaderAriaLabel.toLowerCase()}
+                />
             </MenuWrapper>
         </div>
     );

webapp/channels/src/components/channel_header_dropdown/channel_header_dropdown.tsx

@@ -2,22 +2,20 @@
 // See LICENSE.txt for license information.
 
 import React, {memo} from 'react';
-import {useIntl} from 'react-intl';
 
 import {ChannelHeaderDropdownItems} from 'components/channel_header_dropdown';
 import Menu from 'components/widgets/menu/menu';
 
-const ChannelHeaderDropdown = () => {
-    const intl = useIntl();
-
-    return (
+const ChannelHeaderDropdown = ({ariaLabel}: {
+    ariaLabel: string;
+}) =>
+    (
         <Menu
             id='channelHeaderDropdownMenu'
-            ariaLabel={intl.formatMessage({id: 'channel_header.menuAriaLabel', defaultMessage: 'Channel Menu'}).toLowerCase()}
+            ariaLabel={ariaLabel}
         >
             <ChannelHeaderDropdownItems isMobile={false}/>
         </Menu>
     );
-};
 
 export default memo(ChannelHeaderDropdown);

webapp/channels/src/components/widgets/menu/menu_items/menu_item_action.tsx

@@ -8,7 +8,6 @@ import menuItem from './menu_item';
 
 type Props = {
     onClick: (e: React.MouseEvent) => void;
-    ariaLabel?: string;
     text: React.ReactNode;
     extraText?: string;
     id?: string;
@@ -21,7 +20,6 @@ type Props = {
 }
 export const MenuItemActionImpl = ({
     onClick,
-    ariaLabel,
     text,
     extraText,
     id,
@@ -36,7 +34,6 @@ export const MenuItemActionImpl = ({
         <button
             data-testid={id}
             id={id}
-            aria-label={ariaLabel}
             className={classNames('style--none', buttonClass, {
                 'MenuItem__with-help': extraText,
                 'MenuItem__with-sibling': sibling,

webapp/channels/src/i18n/en.json

@@ -3208,6 +3208,7 @@
   "channel_header.closeChannelInfo": "Close Info",
   "channel_header.convert": "Convert to Private Channel",
   "channel_header.delete": "Archive Channel",
+  "channel_header.directchannel": "{displayName} (you) Channel Menu",
   "channel_header.directchannel.you": "{displayname} (you) ",
   "channel_header.flagged": "Saved messages",
   "channel_header.groupMessageHasGuests": "This group message has guests",
@@ -3220,6 +3221,7 @@
   "channel_header.mute": "Mute Channel",
   "channel_header.muteConversation": "Mute Conversation",
   "channel_header.openChannelInfo": "View Info",
+  "channel_header.otherchannel": "{displayName} Channel Menu",
   "channel_header.pinnedPosts": "Pinned messages",
   "channel_header.recentMentions": "Recent mentions",
   "channel_header.rename": "Rename Channel",