[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>
2025-03-13 03:04:45 +05:30
--- a/e2e-tests/cypress/tests/integration/channels/channel_sidebar/category_muting_spec.ts
+++ b/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
--- a/e2e-tests/cypress/tests/integration/channels/channel_sidebar/custom_categories_spec.ts
+++ b/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();
--- a/e2e-tests/cypress/tests/integration/channels/channel_sidebar/helpers.ts
+++ b/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);

--- a/e2e-tests/cypress/tests/integration/channels/channel_sidebar/sidebar_category_menu_spec.ts
+++ b/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);

--- a/webapp/channels/src/components/menu/menu.tsx
+++ b/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>
--- a/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/snapshots/index.test.tsx.snap
+++ b/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]}
--- a/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/index.tsx
+++ b/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}
--- a/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_menu/sidebar_category_generic_menu.tsx
+++ b/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={{
--- a/webapp/channels/src/components/sidebar/sidebar_category/sidebar_category_sorting_menu.tsx
+++ b/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={{
--- a/webapp/channels/src/components/sidebar/unread_channels.tsx
+++ b/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}
--- a/webapp/channels/src/i18n/en.json
+++ b/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",