From 94f573fbe0ed171d7b565740cfe045929989efd1 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 26 Jun 2026 12:06:06 -0300 Subject: [PATCH 1/7] fix: add `onClick` to display menu items --- .../navbar/NavBarPagesGroup/hooks/useGroupingListItems.tsx | 3 +++ .../client/navbar/NavBarPagesGroup/hooks/useSortModeItems.tsx | 2 ++ .../client/navbar/NavBarPagesGroup/hooks/useViewModeItems.tsx | 4 ++++ 3 files changed, 9 insertions(+) diff --git a/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useGroupingListItems.tsx b/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useGroupingListItems.tsx index 8b1d0fe967dde..9a2c0480fd2e5 100644 --- a/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useGroupingListItems.tsx +++ b/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useGroupingListItems.tsx @@ -26,18 +26,21 @@ export const useGroupingListItems = (): GenericMenuItemProps[] => { id: 'unread', content: t('Unread'), icon: 'flag', + onClick: handleChangeShowUnread, addon: , }, !secondSidebarEnabled && { id: 'favorites', content: t('Favorites'), icon: 'star', + onClick: handleChangeShoFavorite, addon: , }, { id: 'types', content: t('Types'), icon: 'group-by-type', + onClick: handleChangeGroupByType, addon: , }, ].filter(Boolean) as GenericMenuItemProps[]; diff --git a/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useSortModeItems.tsx b/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useSortModeItems.tsx index 9822fd9cacc05..8da9a7734692f 100644 --- a/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useSortModeItems.tsx +++ b/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useSortModeItems.tsx @@ -27,6 +27,7 @@ export const useSortModeItems = (): GenericMenuItemProps[] => { id: 'activity', content: t('Activity'), icon: 'clock', + onClick: setToActivity, addon: , description: sidebarSortBy === 'activity' && isOmnichannelEnabled && , }, @@ -34,6 +35,7 @@ export const useSortModeItems = (): GenericMenuItemProps[] => { id: 'name', content: t('Name'), icon: 'sort-az', + onClick: setToAlphabetical, addon: , description: sidebarSortBy === 'alphabetical' && isOmnichannelEnabled && , }, diff --git a/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useViewModeItems.tsx b/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useViewModeItems.tsx index 7e60074cd7c26..848e439315d7a 100644 --- a/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useViewModeItems.tsx +++ b/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useViewModeItems.tsx @@ -29,24 +29,28 @@ export const useViewModeItems = (): GenericMenuItemProps[] => { id: 'extended', content: t('Extended'), icon: 'extended-view', + onClick: setToExtended, addon: , }, { id: 'medium', content: t('Medium'), icon: 'medium-view', + onClick: setToMedium, addon: , }, { id: 'condensed', content: t('Condensed'), icon: 'condensed-view', + onClick: setToCondensed, addon: , }, { id: 'avatars', content: t('Avatars'), icon: 'user-rounded', + onClick: handleChangeSidebarDisplayAvatar, addon: , }, ]; From 33cbb1b9473489d7f510e375bec0e008e3cecd69 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 26 Jun 2026 14:48:00 -0300 Subject: [PATCH 2/7] test: add display menu a11y tests --- .../e2e/page-objects/fragments/navbar.ts | 24 +++++++ apps/meteor/tests/e2e/sidebar.spec.ts | 70 +++++++++++++++++++ 2 files changed, 94 insertions(+) diff --git a/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts b/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts index 5a6a653645298..b2891f2e45152 100644 --- a/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts +++ b/apps/meteor/tests/e2e/page-objects/fragments/navbar.ts @@ -74,6 +74,30 @@ export class Navbar { return this.root.getByRole('menu', { name: 'Display' }); } + get groupDisplay(): Locator { + return this.menuDisplay.getByRole('group', { name: 'Display' }); + } + + getDisplayMenuItem(mode: 'Extended' | 'Medium' | 'Condensed' | 'Avatars'): Locator { + return this.groupDisplay.getByRole('menuitemcheckbox', { name: mode }); + } + + get groupSortBy(): Locator { + return this.menuDisplay.getByRole('group', { name: 'Sort by' }); + } + + getSortMenuItem(mode: 'Activity' | 'Name'): Locator { + return this.groupSortBy.getByRole('menuitemcheckbox', { name: mode }); + } + + get groupGroupBy(): Locator { + return this.menuDisplay.getByRole('group', { name: 'Group by' }); + } + + getGroupByMenuItem(mode: 'Unread' | 'Favorites' | 'Types'): Locator { + return this.groupGroupBy.getByRole('menuitemcheckbox', { name: mode }); + } + get btnCreateNew(): Locator { return this.pagesGroup.getByRole('button', { name: 'Create new' }); } diff --git a/apps/meteor/tests/e2e/sidebar.spec.ts b/apps/meteor/tests/e2e/sidebar.spec.ts index 99d855eac81e2..1a3831b04cdca 100644 --- a/apps/meteor/tests/e2e/sidebar.spec.ts +++ b/apps/meteor/tests/e2e/sidebar.spec.ts @@ -74,6 +74,76 @@ test.describe.serial('Sidebar', () => { }); }); + test.describe('Display menu keyboard accessibility', () => { + test.afterEach(async ({ api }) => { + await api.post('/users.setPreferences', { + data: { + sidebarViewMode: 'extended', + sidebarDisplayAvatar: true, + sidebarSortby: 'activity', + sidebarShowUnread: true, + }, + }); + }); + + test('should change view mode using keyboard', async ({ page }) => { + await poHomeChannel.navbar.btnDisplay.focus(); + await page.keyboard.press('Enter'); + await expect(poHomeChannel.navbar.menuDisplay).toBeVisible(); + + await poHomeChannel.navbar.getDisplayMenuItem('Medium').focus(); + + await page.keyboard.press('Space'); + + await expect(poHomeChannel.navbar.getDisplayMenuItem('Medium').getByRole('radio')).toBeChecked(); + await page.keyboard.press('Escape'); + }); + + test('should toggle Avatars using keyboard', async ({ page }) => { + await poHomeChannel.navbar.btnDisplay.click(); + const avatarsItem = poHomeChannel.navbar.getDisplayMenuItem('Avatars'); + const initiallyChecked = await avatarsItem.getByRole('checkbox').isChecked(); + + await avatarsItem.focus(); + await page.keyboard.press('Space'); + + const newAvatarsItem = poHomeChannel.navbar.getDisplayMenuItem('Avatars'); + if (initiallyChecked) { + await expect(newAvatarsItem.getByRole('checkbox')).not.toBeChecked(); + } else { + await expect(newAvatarsItem.getByRole('checkbox')).toBeChecked(); + } + await page.keyboard.press('Escape'); + }); + + test('should change sort mode using keyboard', async ({ page }) => { + await poHomeChannel.navbar.btnDisplay.focus(); + await page.keyboard.press('Enter'); + await expect(poHomeChannel.navbar.menuDisplay).toBeVisible(); + await poHomeChannel.navbar.getSortMenuItem('Activity').focus(); + await page.keyboard.press('ArrowDown'); + await expect(poHomeChannel.navbar.getSortMenuItem('Name')).toBeFocused(); + await page.keyboard.press('Space'); + + await expect(poHomeChannel.navbar.getSortMenuItem('Name').getByRole('radio')).toBeChecked(); + await page.keyboard.press('Escape'); + }); + + test('should toggle grouping using keyboard', async ({ page }) => { + await poHomeChannel.navbar.btnDisplay.focus(); + await page.keyboard.press('Enter'); + + const unreadItem = poHomeChannel.navbar.getGroupByMenuItem('Unread'); + await expect(unreadItem.getByRole('checkbox')).toBeChecked(); + + await unreadItem.focus(); + await page.keyboard.press('Space'); + + await expect(poHomeChannel.navbar.getGroupByMenuItem('Unread').getByRole('checkbox')).not.toBeChecked(); + await page.keyboard.press('Escape'); + }); + }); + test.describe('sidebar', async () => { test('should navigate on sidebar items using arrow keys and restore focus', async ({ page }) => { // focus should be on the next item From 3d45f5b9abeab077897a252cfb68d9ab475ae6d0 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 26 Jun 2026 14:48:05 -0300 Subject: [PATCH 3/7] chore: changeset --- .changeset/olive-nails-fix.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/olive-nails-fix.md diff --git a/.changeset/olive-nails-fix.md b/.changeset/olive-nails-fix.md new file mode 100644 index 0000000000000..7a4cf2c364f76 --- /dev/null +++ b/.changeset/olive-nails-fix.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': patch +--- + +Enables keyboard activation for Display menu radio buttons and checkboxes From cb9f9fa691607e3a336d0f4c7224a4eb25796989 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 26 Jun 2026 19:06:24 -0300 Subject: [PATCH 4/7] fix: set noop `onChange` on Display menu addons to prevent double state update on click --- .../NavBarPagesGroup/hooks/useGroupingListItems.tsx | 6 +++--- .../navbar/NavBarPagesGroup/hooks/useSortModeItems.tsx | 4 ++-- .../navbar/NavBarPagesGroup/hooks/useViewModeItems.tsx | 8 ++++---- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useGroupingListItems.tsx b/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useGroupingListItems.tsx index 9a2c0480fd2e5..fff8aa86791cd 100644 --- a/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useGroupingListItems.tsx +++ b/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useGroupingListItems.tsx @@ -27,21 +27,21 @@ export const useGroupingListItems = (): GenericMenuItemProps[] => { content: t('Unread'), icon: 'flag', onClick: handleChangeShowUnread, - addon: , + addon: undefined} />, }, !secondSidebarEnabled && { id: 'favorites', content: t('Favorites'), icon: 'star', onClick: handleChangeShoFavorite, - addon: , + addon: undefined} />, }, { id: 'types', content: t('Types'), icon: 'group-by-type', onClick: handleChangeGroupByType, - addon: , + addon: undefined} />, }, ].filter(Boolean) as GenericMenuItemProps[]; }; diff --git a/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useSortModeItems.tsx b/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useSortModeItems.tsx index 8da9a7734692f..466b25380095e 100644 --- a/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useSortModeItems.tsx +++ b/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useSortModeItems.tsx @@ -28,7 +28,7 @@ export const useSortModeItems = (): GenericMenuItemProps[] => { content: t('Activity'), icon: 'clock', onClick: setToActivity, - addon: , + addon: undefined} />, description: sidebarSortBy === 'activity' && isOmnichannelEnabled && , }, { @@ -36,7 +36,7 @@ export const useSortModeItems = (): GenericMenuItemProps[] => { content: t('Name'), icon: 'sort-az', onClick: setToAlphabetical, - addon: , + addon: undefined} />, description: sidebarSortBy === 'alphabetical' && isOmnichannelEnabled && , }, ]; diff --git a/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useViewModeItems.tsx b/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useViewModeItems.tsx index 848e439315d7a..bceff2a7edea4 100644 --- a/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useViewModeItems.tsx +++ b/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useViewModeItems.tsx @@ -30,28 +30,28 @@ export const useViewModeItems = (): GenericMenuItemProps[] => { content: t('Extended'), icon: 'extended-view', onClick: setToExtended, - addon: , + addon: undefined} />, }, { id: 'medium', content: t('Medium'), icon: 'medium-view', onClick: setToMedium, - addon: , + addon: undefined} />, }, { id: 'condensed', content: t('Condensed'), icon: 'condensed-view', onClick: setToCondensed, - addon: , + addon: undefined} />, }, { id: 'avatars', content: t('Avatars'), icon: 'user-rounded', onClick: handleChangeSidebarDisplayAvatar, - addon: , + addon: undefined} />, }, ]; }; From ed193b77674447d8f70e3694319b49e0112ddeda Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Fri, 26 Jun 2026 19:06:59 -0300 Subject: [PATCH 5/7] test: change default `unread` reset --- apps/meteor/tests/e2e/sidebar.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/meteor/tests/e2e/sidebar.spec.ts b/apps/meteor/tests/e2e/sidebar.spec.ts index 1a3831b04cdca..8ae185467142f 100644 --- a/apps/meteor/tests/e2e/sidebar.spec.ts +++ b/apps/meteor/tests/e2e/sidebar.spec.ts @@ -81,7 +81,7 @@ test.describe.serial('Sidebar', () => { sidebarViewMode: 'extended', sidebarDisplayAvatar: true, sidebarSortby: 'activity', - sidebarShowUnread: true, + sidebarShowUnread: false, }, }); }); @@ -134,12 +134,12 @@ test.describe.serial('Sidebar', () => { await page.keyboard.press('Enter'); const unreadItem = poHomeChannel.navbar.getGroupByMenuItem('Unread'); - await expect(unreadItem.getByRole('checkbox')).toBeChecked(); + await expect(unreadItem.getByRole('checkbox')).not.toBeChecked(); await unreadItem.focus(); await page.keyboard.press('Space'); - await expect(poHomeChannel.navbar.getGroupByMenuItem('Unread').getByRole('checkbox')).not.toBeChecked(); + await expect(poHomeChannel.navbar.getGroupByMenuItem('Unread').getByRole('checkbox')).toBeChecked(); await page.keyboard.press('Escape'); }); }); From 784df514f29948dfc5a53826d40e16c74cd87a15 Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Mon, 29 Jun 2026 10:10:59 -0300 Subject: [PATCH 6/7] test: remove condition since avatar is corretly being reset to default --- apps/meteor/tests/e2e/sidebar.spec.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/apps/meteor/tests/e2e/sidebar.spec.ts b/apps/meteor/tests/e2e/sidebar.spec.ts index 8ae185467142f..4ad47582e3c85 100644 --- a/apps/meteor/tests/e2e/sidebar.spec.ts +++ b/apps/meteor/tests/e2e/sidebar.spec.ts @@ -102,17 +102,12 @@ test.describe.serial('Sidebar', () => { test('should toggle Avatars using keyboard', async ({ page }) => { await poHomeChannel.navbar.btnDisplay.click(); const avatarsItem = poHomeChannel.navbar.getDisplayMenuItem('Avatars'); - const initiallyChecked = await avatarsItem.getByRole('checkbox').isChecked(); await avatarsItem.focus(); await page.keyboard.press('Space'); const newAvatarsItem = poHomeChannel.navbar.getDisplayMenuItem('Avatars'); - if (initiallyChecked) { - await expect(newAvatarsItem.getByRole('checkbox')).not.toBeChecked(); - } else { - await expect(newAvatarsItem.getByRole('checkbox')).toBeChecked(); - } + await expect(newAvatarsItem.getByRole('checkbox')).not.toBeChecked(); await page.keyboard.press('Escape'); }); From f54c7b5d04c0e23bc23b7b128b8f89a308e0461e Mon Sep 17 00:00:00 2001 From: juliajforesti Date: Wed, 1 Jul 2026 16:30:14 -0300 Subject: [PATCH 7/7] test: set `defaultPreferences` before and after tests to ensure test isolation --- apps/meteor/tests/e2e/sidebar.spec.ts | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/apps/meteor/tests/e2e/sidebar.spec.ts b/apps/meteor/tests/e2e/sidebar.spec.ts index 4ad47582e3c85..8851f54e2b358 100644 --- a/apps/meteor/tests/e2e/sidebar.spec.ts +++ b/apps/meteor/tests/e2e/sidebar.spec.ts @@ -75,15 +75,19 @@ test.describe.serial('Sidebar', () => { }); test.describe('Display menu keyboard accessibility', () => { + const defaultPreferences = { + sidebarViewMode: 'extended', + sidebarDisplayAvatar: true, + sidebarSortby: 'activity', + sidebarShowUnread: false, + }; + + test.beforeEach(async ({ api }) => { + await api.post('/users.setPreferences', { data: defaultPreferences }); + }); + test.afterEach(async ({ api }) => { - await api.post('/users.setPreferences', { - data: { - sidebarViewMode: 'extended', - sidebarDisplayAvatar: true, - sidebarSortby: 'activity', - sidebarShowUnread: false, - }, - }); + await api.post('/users.setPreferences', { data: defaultPreferences }); }); test('should change view mode using keyboard', async ({ page }) => {