[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>

e2e-tests/cypress/tests/integration/channels/channel_sidebar/category_muting_spec.ts

@@ -38,7 +38,7 @@ describe('Category muting', () => {
         cy.get('#sidebarItem_off-topic').should('not.have.class', 'muted');
 
         // # Mute the category
-        clickCategoryMenuItem('CHANNELS', 'Mute Category');
+        clickCategoryMenuItem({categoryDisplayName: 'CHANNELS', menuItemText: 'Mute Category', categoryMenuButtonName: 'Channels'});
 
         // * Verify that the category has been muted
         cy.get('.SidebarChannelGroupHeader:contains(CHANNELS)').should('have.class', 'muted');
@@ -46,7 +46,7 @@ describe('Category muting', () => {
         cy.get('#sidebarItem_off-topic').should('have.class', 'muted');
 
         // # Unmute the category
-        clickCategoryMenuItem('CHANNELS', 'Unmute Category');
+        clickCategoryMenuItem({categoryDisplayName: 'CHANNELS', menuItemText: 'Unmute Category', categoryMenuButtonName: 'Channels'});
 
         // * Verify that the category is no longer muted
         cy.get('.SidebarChannelGroupHeader:contains(CHANNELS)').should('not.have.class', 'muted');
@@ -58,7 +58,7 @@ describe('Category muting', () => {
         // # Create a new category
         cy.uiCreateSidebarCategory().then((category) => {
             // # Mute the new category
-            clickCategoryMenuItem(category.displayName, 'Mute Category');
+            clickCategoryMenuItem({categoryDisplayName: category.displayName, menuItemText: 'Mute Category', categoryMenuButtonName: category.displayName.toLowerCase()});
 
             // * Verify that Town Square starts unmuted
             cy.get('#sidebarItem_town-square').should('not.have.class', 'muted');
@@ -85,7 +85,7 @@ describe('Category muting', () => {
         cy.get('.SidebarChannelGroupHeader:contains(CHANNELS)').should('be.visible').should('not.have.class', 'muted');
 
         // # Mute Channels
-        clickCategoryMenuItem('CHANNELS', 'Mute Category');
+        clickCategoryMenuItem({categoryDisplayName: 'CHANNELS', menuItemText: 'Mute Category', categoryMenuButtonName: 'Channels'});
 
         cy.makeClient({user: getAdminAccount()}).then((client) => {
             // # Have another user create a channel

e2e-tests/cypress/tests/integration/channels/channel_sidebar/custom_categories_spec.ts

@@ -34,7 +34,7 @@ describe('Channel sidebar', () => {
         const categoryName = createCategoryFromSidebarMenu();
 
         // # Create new category from category menu
-        clickCategoryMenuItem(categoryName, 'Create New Category');
+        clickCategoryMenuItem({categoryDisplayName: categoryName, menuItemText: 'Create New Category'});
 
         const newCategoryName = `category-${getRandomId()}`;
         cy.get('#editCategoryModal input').type(newCategoryName).type('{enter}');
@@ -57,7 +57,7 @@ describe('Channel sidebar', () => {
         const categoryName = createCategoryFromSidebarMenu();
 
         // # Rename category from category menu
-        clickCategoryMenuItem(categoryName, 'Rename Category');
+        clickCategoryMenuItem({categoryDisplayName: categoryName, menuItemText: 'Rename Category'});
 
         const renameCategory = `category-${getRandomId()}`;
 
@@ -75,7 +75,7 @@ describe('Channel sidebar', () => {
         const categoryName = createCategoryFromSidebarMenu();
 
         // # Delete category from category menu
-        clickCategoryMenuItem(categoryName, 'Delete Category');
+        clickCategoryMenuItem({categoryDisplayName: categoryName, menuItemText: 'Delete Category'});
 
         // # Click on delete button
         cy.get('.GenericModal__button.delete').click();

e2e-tests/cypress/tests/integration/channels/channel_sidebar/helpers.ts

@@ -3,10 +3,17 @@
 
 import * as TIMEOUTS from '../../../fixtures/timeouts';
 
-export function clickCategoryMenuItem(categoryDisplayName, menuItemText, isSubMenu = false) {
+type ClickCategoryMenuItemProps = {
+    categoryDisplayName: string;
+    menuItemText: string;
+    categoryMenuButtonName?: string;
+    isSubMenu?: boolean;
+}
+
+export function clickCategoryMenuItem({categoryDisplayName, menuItemText, categoryMenuButtonName = categoryDisplayName, isSubMenu = false}: ClickCategoryMenuItemProps) {
     cy.get('#SidebarContainer').should('be.visible').within(() => {
         cy.findByText(categoryDisplayName).should('exist').parents('.SidebarChannelGroupHeader').within(() => {
-            cy.findByLabelText('Category options').should('exist').click({force: true});
+            cy.findByLabelText(`${categoryMenuButtonName} category options`).should('exist').click({force: true});
         });
     });
 
@@ -22,7 +29,7 @@ export function clickCategoryMenuItem(categoryDisplayName, menuItemText, isSubMe
 }
 
 export function clickSortCategoryMenuItem(categoryDisplayName, menuItemText) {
-    clickCategoryMenuItem(categoryDisplayName, 'Sort', true);
+    clickCategoryMenuItem({categoryDisplayName, menuItemText: 'Sort', isSubMenu: true});
 
     cy.wait(TIMEOUTS.HALF_SEC);
 

e2e-tests/cypress/tests/integration/channels/channel_sidebar/sidebar_category_menu_spec.ts

@@ -22,7 +22,7 @@ describe('Sidebar category menu', () => {
     });
 
     it('MM-T3171_1 Verify that the 3-dot menu on the Channels Category contains an option to Create New Category', () => {
-        clickCategoryMenuItem('CHANNELS', 'Create New Category');
+        clickCategoryMenuItem({categoryDisplayName: 'CHANNELS', menuItemText: 'Create New Category', categoryMenuButtonName: 'Channels'});
 
         cy.wait(TIMEOUTS.ONE_SEC);
 
@@ -43,7 +43,7 @@ describe('Sidebar category menu', () => {
         cy.contains('.SidebarChannelGroup', 'FAVORITES').find('#sidebarItem_town-square');
 
         // # Verify that Create New Category exists on Favorites category and click on it
-        clickCategoryMenuItem('FAVORITES', 'Create New Category');
+        clickCategoryMenuItem({categoryDisplayName: 'FAVORITES', menuItemText: 'Create New Category', categoryMenuButtonName: 'Favorites'});
 
         cy.wait(TIMEOUTS.ONE_SEC);
 

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 ?
+    const markAsReadMenuItem = showUnreadsCategory === false ? (
-        null :
+        <MarkAsReadMenuItem
-        (
+            id={category.id}
-            <MarkAsReadMenuItem
+            handleViewCategory={handleViewCategory}
-                id={category.id}
+            numChannels={unreadsIds.length}
-                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'})}>
+            <SidebarCategoryHeaderStatic displayName={intl.formatMessage({id: 'sidebar.types.unreadChannels.displayName', defaultMessage: 'UNREADS'})}>
-                <SidebarCategoryGenericMenu id='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",