[MA-32]: Added logic to correctly give accessible name to channel hea…

…der button
Brightscout · Dec 24, 2024 · 2842f8d · 2842f8d
1 parent 3c88f66
commit 2842f8d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/webapp/channels/src/components/channel_header/channel_header_title.tsx b/webapp/channels/src/components/channel_header/channel_header_title.tsx
@@ -105,8 +105,11 @@ const ChannelHeaderTitle = ({
                 <strong
                     id='channelHeaderTitle'
                     className='heading'
+                    aria-labelledby='channelHeaderTitle.bot'
                 >
-                    <span>
+                    <span
+                        id='channelHeaderTitle.bot'
+                    >
                         {archivedIcon}
                         {channelTitle}
                     </span>
@@ -132,7 +135,10 @@ const ChannelHeaderTitle = ({
                 >
                     <button
                         className={classNames('channel-header__trigger style--none', {active: titleMenuOpen})}
-                        aria-label={intl.formatMessage({id: 'channel_header.menuAriaLabel', defaultMessage: 'Channel Menu'}).toLowerCase()}
+                        aria-label={intl.formatMessage({id: 'channel_header.menuAriaLabel',
+                            defaultMessage: '{channelName} Channel Menu'}, {
+                            channelName: isDirect ? channel.display_name + '(you)' : channel.display_name,
+                        }).toLowerCase()}
                     >
                         {showTooltip ? (
                             <WithTooltip
@@ -166,6 +172,7 @@ const ChannelHeaderTitle = ({
                         <span
                             id='channelHeaderDropdownIcon'
                             className='icon icon-chevron-down header-dropdown-chevron-icon'
+                            aria-hidden='true'
                         />
                     </button>
                 </div>

diff --git a/webapp/channels/src/components/widgets/menu/menu_items/menu_item_action.tsx b/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,

diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
@@ -3198,7 +3198,7 @@
   "channel_header.lastOnline": "Last online {timestamp}",
   "channel_header.leave": "Leave Channel",
   "channel_header.manageMembers": "Manage Members",
-  "channel_header.menuAriaLabel": "Channel Menu",
+  "channel_header.menuAriaLabel": "{channelName} Channel Menu",
   "channel_header.mute": "Mute Channel",
   "channel_header.muteConversation": "Mute Conversation",
   "channel_header.openChannelInfo": "View Info",