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

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

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

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