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
diff --git a/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useGroupingListItems.tsx b/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useGroupingListItems.tsx
index 8b1d0fe967dde..fff8aa86791cd 100644
--- a/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useGroupingListItems.tsx
+++ b/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useGroupingListItems.tsx
@@ -26,19 +26,22 @@ export const useGroupingListItems = (): GenericMenuItemProps[] => {
id: 'unread',
content: t('Unread'),
icon: 'flag',
- addon: ,
+ onClick: handleChangeShowUnread,
+ addon: undefined} />,
},
!secondSidebarEnabled && {
id: 'favorites',
content: t('Favorites'),
icon: 'star',
- addon: ,
+ onClick: handleChangeShoFavorite,
+ addon: undefined} />,
},
{
id: 'types',
content: t('Types'),
icon: 'group-by-type',
- addon: ,
+ onClick: handleChangeGroupByType,
+ 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 9822fd9cacc05..466b25380095e 100644
--- a/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useSortModeItems.tsx
+++ b/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useSortModeItems.tsx
@@ -27,14 +27,16 @@ export const useSortModeItems = (): GenericMenuItemProps[] => {
id: 'activity',
content: t('Activity'),
icon: 'clock',
- addon: ,
+ onClick: setToActivity,
+ addon: undefined} />,
description: sidebarSortBy === 'activity' && isOmnichannelEnabled && ,
},
{
id: 'name',
content: t('Name'),
icon: 'sort-az',
- addon: ,
+ onClick: setToAlphabetical,
+ 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 7e60074cd7c26..bceff2a7edea4 100644
--- a/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useViewModeItems.tsx
+++ b/apps/meteor/client/navbar/NavBarPagesGroup/hooks/useViewModeItems.tsx
@@ -29,25 +29,29 @@ export const useViewModeItems = (): GenericMenuItemProps[] => {
id: 'extended',
content: t('Extended'),
icon: 'extended-view',
- addon: ,
+ onClick: setToExtended,
+ addon: undefined} />,
},
{
id: 'medium',
content: t('Medium'),
icon: 'medium-view',
- addon: ,
+ onClick: setToMedium,
+ addon: undefined} />,
},
{
id: 'condensed',
content: t('Condensed'),
icon: 'condensed-view',
- addon: ,
+ onClick: setToCondensed,
+ addon: undefined} />,
},
{
id: 'avatars',
content: t('Avatars'),
icon: 'user-rounded',
- addon: ,
+ onClick: handleChangeSidebarDisplayAvatar,
+ addon: undefined} />,
},
];
};
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..8851f54e2b358 100644
--- a/apps/meteor/tests/e2e/sidebar.spec.ts
+++ b/apps/meteor/tests/e2e/sidebar.spec.ts
@@ -74,6 +74,75 @@ 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: defaultPreferences });
+ });
+
+ 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');
+
+ await avatarsItem.focus();
+ await page.keyboard.press('Space');
+
+ const newAvatarsItem = poHomeChannel.navbar.getDisplayMenuItem('Avatars');
+ await expect(newAvatarsItem.getByRole('checkbox')).not.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')).not.toBeChecked();
+
+ await unreadItem.focus();
+ await page.keyboard.press('Space');
+
+ await expect(poHomeChannel.navbar.getGroupByMenuItem('Unread').getByRole('checkbox')).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