From e9d08356b5879bacb618089a7c6fa1d3d6073c5c Mon Sep 17 00:00:00 2001 From: R Midhun Suresh Date: Mon, 6 Jan 2025 23:47:20 +0530 Subject: [PATCH 1/3] Allow flex component to take child containers props So that we can set attributes on the container --- src/components/utils/Flex.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/utils/Flex.tsx b/src/components/utils/Flex.tsx index ae5704d2479..9ce9257b500 100644 --- a/src/components/utils/Flex.tsx +++ b/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, { useEffect, useRef } from "react"; +import React, { ComponentProps, JSXElementConstructor, useEffect, useRef } from "react"; -type FlexProps = { +type FlexProps> = { /** * 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; /** * A flexbox container helper */ -export function Flex({ +export function Flex = "div">({ as = "div", display = "flex", direction = "row", @@ -63,7 +63,7 @@ export function Flex({ className, children, ...props -}: React.PropsWithChildren): JSX.Element { +}: React.PropsWithChildren>): JSX.Element { const ref = useRef(); useEffect(() => { From aaa67083097e9fc6ae710cb4557d61a265c7aae1 Mon Sep 17 00:00:00 2001 From: R Midhun Suresh Date: Mon, 6 Jan 2025 23:49:01 +0530 Subject: [PATCH 2/3] 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 8dd0a0995b5..92a4df37d8e 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 = (props: IProps) => { header={_t("common|people")} onClose={props.onClose} > - - - - - - {({ height, width }) => ( - (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} - /> - )} - - + + {({ onKeyDownHandler }) => ( + + + + + + {({ height, width }) => ( + (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} + /> + )} + + + )} + ); }; diff --git a/src/components/views/rooms/MemberList/tiles/common/MemberTileLayout.tsx b/src/components/views/rooms/MemberList/tiles/common/MemberTileLayout.tsx index ae1cf78b3c3..1cb5a7d8083 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.
- +
{props.avatarJsx} {props.presenceJsx} @@ -34,7 +34,7 @@ export function MemberTileLayout(props: Props): JSX.Element { {props.userLabelJsx} {props.e2eIconJsx}
- +
); } From ee67ef8f72f1466e980254c2d57c670a1905d3d9 Mon Sep 17 00:00:00 2001 From: R Midhun Suresh Date: Tue, 7 Jan 2025 15:47:20 +0530 Subject: [PATCH 3/3] Update snapshot --- .../memberlist/__snapshots__/MemberTileView-test.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap b/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap index 6feb72ea62d..0d4b8a8fe09 100644 --- a/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap +++ b/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" >