From b25a14cbf71eed6e0e6f603c5d41098b1f2635f4 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Mon, 6 Jan 2025 23:49:01 +0530
Subject: [PATCH] Use Up/Down arrow keys to navigate through the list

---
 .../views/rooms/MemberList/MemberListView.tsx | 51 +++++++++++--------
 .../tiles/common/MemberTileLayout.tsx         |  6 +--
 2 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/src/components/views/rooms/MemberList/MemberListView.tsx b/src/components/views/rooms/MemberList/MemberListView.tsx
index 8dd0a0995b..92a4df37d8 100644
--- a/src/components/views/rooms/MemberList/MemberListView.tsx
+++ b/src/components/views/rooms/MemberList/MemberListView.tsx
@@ -17,6 +17,7 @@ import { ThreePidInviteTileView } from "./tiles/ThreePidInviteTileView";
 import { MemberListHeaderView } from "./MemberListHeaderView";
 import BaseCard from "../../right_panel/BaseCard";
 import { _t } from "../../../../languageHandler";
+import { RovingTabIndexProvider } from "../../../../accessibility/RovingTabIndex";
 
 interface IProps {
     roomId: string;
@@ -55,26 +56,36 @@ const MemberListView: React.FC<IProps> = (props: IProps) => {
             header={_t("common|people")}
             onClose={props.onClose}
         >
-            <Flex align="stretch" direction="column" className="mx_MemberListView_container">
-                <Form.Root>
-                    <MemberListHeaderView vm={vm} />
-                </Form.Root>
-                <AutoSizer>
-                    {({ height, width }) => (
-                        <List
-                            rowRenderer={rowRenderer}
-                            // All the member tiles will have a height of 56px.
-                            // The additional empty div at the end of the list should have a height of 32px.
-                            rowHeight={({ index }) => (index === memberCount ? 32 : 56)}
-                            // The +1 refers to the additional empty div that we render at the end of the list.
-                            rowCount={memberCount + 1}
-                            // Subtract the height of MemberlistHeaderView so that the parent div does not overflow.
-                            height={height - 113}
-                            width={width}
-                        />
-                    )}
-                </AutoSizer>
-            </Flex>
+            <RovingTabIndexProvider handleUpDown scrollIntoView>
+                {({ onKeyDownHandler }) => (
+                    <Flex
+                        tabIndex={0}
+                        onKeyDown={onKeyDownHandler}
+                        align="stretch"
+                        direction="column"
+                        className="mx_MemberListView_container"
+                    >
+                        <Form.Root>
+                            <MemberListHeaderView vm={vm} />
+                        </Form.Root>
+                        <AutoSizer>
+                            {({ height, width }) => (
+                                <List
+                                    rowRenderer={rowRenderer}
+                                    // All the member tiles will have a height of 56px.
+                                    // The additional empty div at the end of the list should have a height of 32px.
+                                    rowHeight={({ index }) => (index === memberCount ? 32 : 56)}
+                                    // The +1 refers to the additional empty div that we render at the end of the list.
+                                    rowCount={memberCount + 1}
+                                    // Subtract the height of MemberlistHeaderView so that the parent div does not overflow.
+                                    height={height - 113}
+                                    width={width}
+                                />
+                            )}
+                        </AutoSizer>
+                    </Flex>
+                )}
+            </RovingTabIndexProvider>
         </BaseCard>
     );
 };
diff --git a/src/components/views/rooms/MemberList/tiles/common/MemberTileLayout.tsx b/src/components/views/rooms/MemberList/tiles/common/MemberTileLayout.tsx
index ae1cf78b3c..1cb5a7d808 100644
--- a/src/components/views/rooms/MemberList/tiles/common/MemberTileLayout.tsx
+++ b/src/components/views/rooms/MemberList/tiles/common/MemberTileLayout.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 
-import AccessibleButton from "../../../../elements/AccessibleButton";
+import { RovingAccessibleButton } from "../../../../../../accessibility/RovingTabIndex";
 
 interface Props {
     avatarJsx: JSX.Element;
@@ -23,7 +23,7 @@ export function MemberTileLayout(props: Props): JSX.Element {
     return (
         // The wrapping div is required to make the magic mouse listener work, for some reason.
         <div>
-            <AccessibleButton className="mx_MemberTileView" title={props.title} onClick={props.onClick}>
+            <RovingAccessibleButton className="mx_MemberTileView" title={props.title} onClick={props.onClick}>
                 <div className="mx_MemberTileView_left">
                     <div className="mx_MemberTileView_avatar">
                         {props.avatarJsx} {props.presenceJsx}
@@ -34,7 +34,7 @@ export function MemberTileLayout(props: Props): JSX.Element {
                     {props.userLabelJsx}
                     {props.e2eIconJsx}
                 </div>
-            </AccessibleButton>
+            </RovingAccessibleButton>
         </div>
     );
 }