diff --git a/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx b/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx index 26d41a1307e33..6afa27992fb23 100644 --- a/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx +++ b/apps/meteor/client/sidebarv2/RoomList/RoomList.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/no-multi-comp */ import { Box, SidebarV2CollapseGroup } from '@rocket.chat/fuselage'; import { useResizeObserver } from '@rocket.chat/fuselage-hooks'; import { useUserPreference, useUserId } from '@rocket.chat/ui-contexts'; @@ -22,7 +21,7 @@ const RoomList = () => { const { t } = useTranslation(); const isAnonymous = !useUserId(); - const { collapsedGroups, handleCollapsedGroups } = useCollapsedGroups(); + const { collapsedGroups, handleClick, handleKeyDown } = useCollapsedGroups(); const { groupsCount, groupsList, roomList } = useRoomList({ collapsedGroups }); const avatarTemplate = useAvatarTemplate(); const sideBarItemTemplate = useTemplateByViewMode(); @@ -54,8 +53,8 @@ const RoomList = () => { groupContent={(index) => ( handleCollapsedGroups(groupsList[index])} - onKeyDown={() => handleCollapsedGroups(groupsList[index])} + onClick={() => handleClick(groupsList[index])} + onKeyDown={(e) => handleKeyDown(e, groupsList[index])} expanded={!collapsedGroups.includes(groupsList[index])} /> )} diff --git a/apps/meteor/client/sidebarv2/RoomList/useSidebarListNavigation.ts b/apps/meteor/client/sidebarv2/RoomList/useSidebarListNavigation.ts index 343df536c3f43..d2482aca65eda 100644 --- a/apps/meteor/client/sidebarv2/RoomList/useSidebarListNavigation.ts +++ b/apps/meteor/client/sidebarv2/RoomList/useSidebarListNavigation.ts @@ -2,6 +2,7 @@ import { useFocusManager } from '@react-aria/focus'; import { useCallback } from 'react'; const isListItem = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-sidebar-v2-item'); +const isCollapseGroup = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-sidebar-v2-collapse-group__bar'); const isListItemMenu = (node: EventTarget) => (node as HTMLElement).classList.contains('rcx-sidebar-v2-item__menu'); /** @@ -24,7 +25,7 @@ export const useSidebarListNavigation = () => { return; } - if (!isListItem(e.target)) { + if (!isListItem(e.target) && !isCollapseGroup(e.target)) { return; } @@ -34,26 +35,29 @@ export const useSidebarListNavigation = () => { if (e.shiftKey) { sidebarListFocusManager.focusPrevious({ - accept: (node) => !isListItem(node) && !isListItemMenu(node), + accept: (node) => !isListItem(node) && !isListItemMenu(node) && !isCollapseGroup(node), }); } else if (isListItemMenu(e.target)) { sidebarListFocusManager.focusNext({ - accept: (node) => !isListItem(node) && !isListItemMenu(node), + accept: (node) => !isListItem(node) && !isListItemMenu(node) && !isCollapseGroup(node), }); } else { sidebarListFocusManager.focusNext({ - accept: (node) => !isListItem(node), + accept: (node) => !isListItem(node) && !isCollapseGroup(node), }); } } if (e.key === 'ArrowUp' || e.key === 'ArrowDown') { + e.preventDefault(); + e.stopPropagation(); + if (e.key === 'ArrowUp') { - sidebarListFocusManager.focusPrevious({ accept: (node) => isListItem(node) }); + sidebarListFocusManager.focusPrevious({ accept: (node) => isListItem(node) || isCollapseGroup(node) }); } if (e.key === 'ArrowDown') { - sidebarListFocusManager.focusNext({ accept: (node) => isListItem(node) }); + sidebarListFocusManager.focusNext({ accept: (node) => isListItem(node) || isCollapseGroup(node) }); } lastItemFocused = document.activeElement as HTMLElement; diff --git a/apps/meteor/client/sidebarv2/hooks/useCollapsedGroups.ts b/apps/meteor/client/sidebarv2/hooks/useCollapsedGroups.ts index 6aac9f157277d..d320dd03d78ef 100644 --- a/apps/meteor/client/sidebarv2/hooks/useCollapsedGroups.ts +++ b/apps/meteor/client/sidebarv2/hooks/useCollapsedGroups.ts @@ -1,10 +1,11 @@ import { useLocalStorage } from '@rocket.chat/fuselage-hooks'; +import type { KeyboardEvent } from 'react'; import { useCallback } from 'react'; export const useCollapsedGroups = () => { const [collapsedGroups, setCollapsedGroups] = useLocalStorage('sidebarGroups', []); - const handleCollapsedGroups = useCallback( + const handleClick = useCallback( (group: string) => { if (collapsedGroups.includes(group)) { setCollapsedGroups(collapsedGroups.filter((item) => item !== group)); @@ -15,5 +16,11 @@ export const useCollapsedGroups = () => { [collapsedGroups, setCollapsedGroups], ); - return { collapsedGroups, handleCollapsedGroups }; + const handleKeyDown = (event: KeyboardEvent, group: string) => { + if (['Enter', 'Space'].includes(event.code)) { + event.preventDefault(); + handleClick(group); + } + }; + return { collapsedGroups, handleClick, handleKeyDown }; };