regression: fix Sidebar collapsers keyboard navigation (#33697)

apps/meteor/client/sidebarv2/RoomList/RoomList.tsx

-/* 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) => (
 					<SidebarV2CollapseGroup
 						title={t(groupsList[index])}
-						onClick={() => handleCollapsedGroups(groupsList[index])}
-						onKeyDown={() => handleCollapsedGroups(groupsList[index])}
+						onClick={() => handleClick(groupsList[index])}
+						onKeyDown={(e) => handleKeyDown(e, groupsList[index])}
 						expanded={!collapsedGroups.includes(groupsList[index])}
 					/>
 				)}

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;

apps/meteor/client/sidebarv2/hooks/useCollapsedGroups.ts

 import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
+import type { KeyboardEvent } from 'react';
 import { useCallback } from 'react';
 
 export const useCollapsedGroups = () => {
 	const [collapsedGroups, setCollapsedGroups] = useLocalStorage<string[]>('sidebarGroups', []);
 
-	const handleCollapsedGroups = useCallback(
+	const handleClick = useCallback(
 		(group: string) => {
 			if (collapsedGroups.includes(group)) {
 				setCollapsedGroups(collapsedGroups.filter((item) => item !== group));
@@ -15,5 +16,15 @@ export const useCollapsedGroups = () => {
 		[collapsedGroups, setCollapsedGroups],
 	);
 
-	return { collapsedGroups, handleCollapsedGroups };
+	const handleKeyDown = useCallback(
+		(event: KeyboardEvent, group: string) => {
+			if (['Enter', 'Space'].includes(event.code)) {
+				event.preventDefault();
+				handleClick(group);
+			}
+		},
+		[handleClick],
+	);
+
+	return { collapsedGroups, handleClick, handleKeyDown };
 };