OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Use Up/Down arrow keys to navigate through the list

midhun/memberlist-redesign-accessibility
R Midhun Suresh 2025-01-06 23:49:01 +05:30
parent a629d79fef
commit b25a14cbf7
No known key found for this signature in database
2 changed files with 34 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/views/rooms/MemberList/MemberListView.tsx
View File

@ -17,6 +17,7 @@ import { ThreePidInviteTileView } from "./tiles/ThreePidInviteTileView";
import { MemberListHeaderView } from "./MemberListHeaderView"; import { MemberListHeaderView } from "./MemberListHeaderView";
import BaseCard from "../../right_panel/BaseCard"; import BaseCard from "../../right_panel/BaseCard";
import { _t } from "../../../../languageHandler"; import { _t } from "../../../../languageHandler";
import { RovingTabIndexProvider } from "../../../../accessibility/RovingTabIndex";
interface IProps { interface IProps {
roomId: string; roomId: string;
@ -55,7 +56,15 @@ const MemberListView: React.FC<IProps> = (props: IProps) => {
header={_t("common|people")} header={_t("common|people")}
onClose={props.onClose} onClose={props.onClose}
> >
<Flex align="stretch" direction="column" className="mx_MemberListView_container"> <RovingTabIndexProvider handleUpDown scrollIntoView>
{({ onKeyDownHandler }) => (
<Flex
tabIndex={0}
onKeyDown={onKeyDownHandler}
align="stretch"
direction="column"
className="mx_MemberListView_container"
>
<Form.Root> <Form.Root>
<MemberListHeaderView vm={vm} /> <MemberListHeaderView vm={vm} />
</Form.Root> </Form.Root>
@ -75,6 +84,8 @@ const MemberListView: React.FC<IProps> = (props: IProps) => {
)} )}
</AutoSizer> </AutoSizer>
</Flex> </Flex>
)}
</RovingTabIndexProvider>
</BaseCard> </BaseCard>
); );
}; };

6
src/components/views/rooms/MemberList/tiles/common/MemberTileLayout.tsx
View File

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
import React from "react"; import React from "react";
import AccessibleButton from "../../../../elements/AccessibleButton"; import { RovingAccessibleButton } from "../../../../../../accessibility/RovingTabIndex";
interface Props { interface Props {
avatarJsx: JSX.Element; avatarJsx: JSX.Element;
@ -23,7 +23,7 @@ export function MemberTileLayout(props: Props): JSX.Element {
return ( return (
// The wrapping div is required to make the magic mouse listener work, for some reason. // The wrapping div is required to make the magic mouse listener work, for some reason.
<div> <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_left">
<div className="mx_MemberTileView_avatar"> <div className="mx_MemberTileView_avatar">
{props.avatarJsx} {props.presenceJsx} {props.avatarJsx} {props.presenceJsx}
@ -34,7 +34,7 @@ export function MemberTileLayout(props: Props): JSX.Element {
{props.userLabelJsx} {props.userLabelJsx}
{props.e2eIconJsx} {props.e2eIconJsx}
</div> </div>
</AccessibleButton> </RovingAccessibleButton>
</div> </div>
); );
} }