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