Use Up/Down arrow keys to navigate through the list

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">
+            <RovingTabIndexProvider handleUpDown scrollIntoView>
-                <Form.Root>
+                {({ onKeyDownHandler }) => (
-                    <MemberListHeaderView vm={vm} />
+                    <Flex
-                </Form.Root>
+                        tabIndex={0}
-                <AutoSizer>
+                        onKeyDown={onKeyDownHandler}
-                    {({ height, width }) => (
+                        align="stretch"
-                        <List
+                        direction="column"
-                            rowRenderer={rowRenderer}
+                        className="mx_MemberListView_container"
-                            // 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.
+                        <Form.Root>
-                            rowHeight={({ index }) => (index === memberCount ? 32 : 56)}
+                            <MemberListHeaderView vm={vm} />
-                            // The +1 refers to the additional empty div that we render at the end of the list.
+                        </Form.Root>
-                            rowCount={memberCount + 1}
+                        <AutoSizer>
-                            // Subtract the height of MemberlistHeaderView so that the parent div does not overflow.
+                            {({ height, width }) => (
-                            height={height - 113}
+                                <List
-                            width={width}
+                                    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.
-                </AutoSizer>
+                                    rowHeight={({ index }) => (index === memberCount ? 32 : 56)}
-            </Flex>
+                                    // 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>
     );
 };

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>
     );
 }