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