[MM-61640]: Add descriptive accessible names (#29928)

* [MA-57]: Add descriptive accessible names

* [MA-57]: Updated unread message to be translatable

* [MA-57]: Fixed failing e2e test cases

* [MA-57]: Added Type definition for channel sidebar helper function and fixed failing e2e test case

* rm capitalize

---------

Co-authored-by: ayush-chauhan233 <ayush.chauhan@brightscout.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: M-ZubairAhmed <m-zubairahmed@protonmail.com>

webapp/channels/src/components/menu/menu.tsx

@@ -228,6 +228,7 @@ export function Menu(props: Props) {
                     title={props.menuButtonTooltip.text}
                     isVertical={props.menuButtonTooltip?.isVertical ?? true}
                     disabled={isMenuOpen || props.menuButton?.disabled}
+                    className={props.menuButtonTooltip.class}
                 >
                     {triggerElement}
                 </WithTooltip>

webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/__snapshots__/index.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`components/sidebar/sidebar_category/sidebar_category_menu should match snapshot and contain correct buttons 1`] = `
 <Memo(SidebarCategoryGenericMenu)
   id="test_category_id"
+  name="custom_category_1"
 >
   <MarkAsUnreadItem
     handleViewCategory={[Function]}

webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/index.tsx

@@ -226,18 +226,19 @@ const SidebarCategoryMenu = ({
         trackEvent('ui', 'ui_sidebar_category_menu_viewCategory');
     }, [dispatch, unreadsIds]);
 
-    const markAsReadMenuItem = showUnreadsCategory ?
-        null :
-        (
-            <MarkAsReadMenuItem
-                id={category.id}
-                handleViewCategory={handleViewCategory}
-                numChannels={unreadsIds.length}
-            />
-        );
+    const markAsReadMenuItem = showUnreadsCategory === false ? (
+        <MarkAsReadMenuItem
+            id={category.id}
+            handleViewCategory={handleViewCategory}
+            numChannels={unreadsIds.length}
+        />
+    ) : null;
 
     return (
-        <SidebarCategoryGenericMenu id={category.id}>
+        <SidebarCategoryGenericMenu
+            id={category.id}
+            name={category.display_name}
+        >
             {markAsReadMenuItem}
             {markAsReadMenuItem && <Menu.Separator/>}
             {muteUnmuteCategoryMenuItem}

webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/sidebar_category_generic_menu.tsx

@@ -14,11 +14,13 @@ import * as Menu from 'components/menu';
 type Props = {
     id: string;
     children: React.ReactNode[];
+    name: string;
 };
 
 const SidebarCategoryGenericMenu = ({
     id,
     children,
+    name,
 }: Props) => {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
 
@@ -42,12 +44,12 @@ const SidebarCategoryGenericMenu = ({
             <Menu.Container
                 menuButton={{
                     id: `SidebarCategoryMenu-Button-${id}`,
-                    'aria-label': formatMessage({id: 'sidebar_left.sidebar_category_menu.editCategory', defaultMessage: 'Category options'}),
+                    'aria-label': formatMessage({id: 'sidebar_left.sidebar_category_menu.editCategory', defaultMessage: 'Category options'}, {name}),
                     class: 'SidebarMenu_menuButton',
                     children: <DotsVerticalIcon size={16}/>,
                 }}
                 menuButtonTooltip={{
-                    text: formatMessage({id: 'sidebar_left.sidebar_category_menu.editCategory', defaultMessage: 'Category options'}),
+                    text: formatMessage({id: 'sidebar_left.sidebar_category_menu.editCategory', defaultMessage: 'Category options'}, {name}),
                     class: 'hidden-xs',
                 }}
                 menu={{

webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_sorting_menu.tsx

@@ -193,12 +193,12 @@ const SidebarCategorySortingMenu = ({
             <Menu.Container
                 menuButton={{
                     id: `SidebarCategorySortingMenu-Button-${category.id}`,
-                    'aria-label': formatMessage({id: 'sidebar_left.sidebar_category_menu.editCategory', defaultMessage: 'Category options'}),
+                    'aria-label': formatMessage({id: 'sidebar_left.sidebar_category_menu.editCategory', defaultMessage: 'Category options'}, {name: category.display_name}),
                     class: 'SidebarMenu_menuButton sortingMenu',
                     children: <DotsVerticalIcon size={16}/>,
                 }}
                 menuButtonTooltip={{
-                    text: formatMessage({id: 'sidebar_left.sidebar_category_menu.editCategory', defaultMessage: 'Category options'}),
+                    text: formatMessage({id: 'sidebar_left.sidebar_category_menu.editCategory', defaultMessage: 'Category options'}, {name: category.display_name}),
                     class: 'hidden-xs',
                 }}
                 menu={{

webapp/channels/src/components/sidebar/unread_channels.tsx

@@ -44,8 +44,11 @@ export default function UnreadChannels({
 
     return (
         <div className='SidebarChannelGroup dropDisabled a11y__section'>
-            <SidebarCategoryHeaderStatic displayName={intl.formatMessage({id: 'sidebar.types.unreads', defaultMessage: 'UNREADS'})}>
-                <SidebarCategoryGenericMenu id='unreads'>
+            <SidebarCategoryHeaderStatic displayName={intl.formatMessage({id: 'sidebar.types.unreadChannels.displayName', defaultMessage: 'UNREADS'})}>
+                <SidebarCategoryGenericMenu
+                    id='unreads'
+                    name={intl.formatMessage({id: 'sidebar.types.unreadChannels.ariaLabel', defaultMessage: 'Unread'})}
+                >
                     <MarkAsReadMenuItem
                         id={'unreads'}
                         handleViewCategory={handleViewCategory}

webapp/channels/src/i18n/en.json

@@ -5165,7 +5165,7 @@
   "sidebar_left.sidebar_category_menu.createCategory": "Create New Category",
   "sidebar_left.sidebar_category_menu.deleteCategory": "Delete Category",
   "sidebar_left.sidebar_category_menu.dropdownAriaLabel": "Edit category menu",
-  "sidebar_left.sidebar_category_menu.editCategory": "Category options",
+  "sidebar_left.sidebar_category_menu.editCategory": "{name} category options",
   "sidebar_left.sidebar_category_menu.muteCategory": "Mute Category",
   "sidebar_left.sidebar_category_menu.renameCategory": "Rename Category",
   "sidebar_left.sidebar_category_menu.sort.dropdownAriaLabel": "Sort submenu",
@@ -5227,7 +5227,8 @@
   "sidebar.types.channels": "CHANNELS",
   "sidebar.types.direct_messages": "DIRECT MESSAGES",
   "sidebar.types.favorites": "FAVORITES",
-  "sidebar.types.unreads": "UNREADS",
+  "sidebar.types.unreadChannels.ariaLabel": "Unread",
+  "sidebar.types.unreadChannels.displayName": "UNREADS",
   "sidebar.unreads": "More unreads",
   "sidebarLeft.browserOrCreateChannelMenu.browseChannelsMenuItem.primaryLabel": "Browse channels",
   "sidebarLeft.browserOrCreateChannelMenu.createCategoryMenuItem.primaryLabel": "Create new category",