Allow navigating through the memberlist using up/down keys (#28949)

* Allow flex component to take child containers props

So that we can set attributes on the container

* Use Up/Down arrow keys to navigate through the list

* Update snapshot

Author: MidhunSureshR

src/components/utils/Flex.tsx

@@ -7,14 +7,14 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classNames from "classnames";
-import React, { useMemo } from "react";
+import React, { ComponentProps, JSXElementConstructor, useMemo } from "react";
 
-type FlexProps = {
+type FlexProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = {
     /**
      * The type of the HTML element
      * @default div
      */
-    as?: string;
+    as?: T;
     /**
      * The CSS class name.
      */
@@ -30,7 +30,7 @@ type FlexProps = {
      */
     direction?: "row" | "column" | "row-reverse" | "column-reverse";
     /**
-     * The alingment of the flex children
+     * The alignment of the flex children
      * @default start
      */
     align?: "start" | "center" | "end" | "baseline" | "stretch";
@@ -48,12 +48,12 @@ type FlexProps = {
      * the on click event callback
      */
     onClick?: (e: React.MouseEvent) => void;
-};
+} & ComponentProps<T>;
 
 /**
  * A flexbox container helper
  */
-export function Flex({
+export function Flex<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div">({
     as = "div",
     display = "flex",
     direction = "row",
@@ -63,7 +63,7 @@ export function Flex({
     className,
     children,
     ...props
-}: React.PropsWithChildren<FlexProps>): JSX.Element {
+}: React.PropsWithChildren<FlexProps<T>>): JSX.Element {
     const style = useMemo(
         () => ({
             "--mx-flex-display": display,

src/components/views/rooms/MemberList/MemberListView.tsx

@@ -21,6 +21,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;
@@ -86,24 +87,33 @@ 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}
-                            rowHeight={getRowHeight}
-                            // The +1 refers to the additional empty div that we render at the end of the list.
-                            rowCount={totalRows + 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
+                        align="stretch"
+                        direction="column"
+                        className="mx_MemberListView_container"
+                        onKeyDown={onKeyDownHandler}
+                    >
+                        <Form.Root>
+                            <MemberListHeaderView vm={vm} />
+                        </Form.Root>
+                        <AutoSizer>
+                            {({ height, width }) => (
+                                <List
+                                    rowRenderer={rowRenderer}
+                                    rowHeight={getRowHeight}
+                                    // The +1 refers to the additional empty div that we render at the end of the list.
+                                    rowCount={totalRows + 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/MemberTileView.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;
@@ -28,7 +28,7 @@ export function MemberTileView(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}
@@ -39,7 +39,7 @@ export function MemberTileView(props: Props): JSX.Element {
                     {userLabelJsx}
                     {props.iconJsx}
                 </div>
-            </AccessibleButton>
+            </RovingAccessibleButton>
         </div>
     );
 }

test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap

@@ -7,7 +7,7 @@ exports[`MemberTileView RoomMemberTileView should display an verified E2EIcon wh
       aria-label="@userId:matrix.org (power 0)"
       class="mx_AccessibleButton mx_MemberTileView"
       role="button"
-      tabindex="0"
+      tabindex="-1"
     >
       <div
         class="mx_MemberTileView_left"
@@ -76,7 +76,7 @@ exports[`MemberTileView RoomMemberTileView should display an warning E2EIcon whe
       aria-label="@userId:matrix.org (power 0)"
       class="mx_AccessibleButton mx_MemberTileView"
       role="button"
-      tabindex="0"
+      tabindex="-1"
     >
       <div
         class="mx_MemberTileView_left"
@@ -145,7 +145,7 @@ exports[`MemberTileView RoomMemberTileView should not display an E2EIcon when th
       aria-label="@userId:matrix.org (power 0)"
       class="mx_AccessibleButton mx_MemberTileView"
       role="button"
-      tabindex="0"
+      tabindex="-1"
     >
       <div
         class="mx_MemberTileView_left"
@@ -195,7 +195,7 @@ exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly
     <div
       class="mx_AccessibleButton mx_MemberTileView"
       role="button"
-      tabindex="0"
+      tabindex="-1"
     >
       <div
         class="mx_MemberTileView_left"