Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Jan 27, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e9d0835
Allow flex component to take child containers props
MidhunSureshR Jan 6, 2025
aaa6708
Use Up/Down arrow keys to navigate through the list
MidhunSureshR Jan 6, 2025
ee67ef8
Update snapshot
MidhunSureshR Jan 7, 2025
13cfc1f
Merge branch 'develop' into midhun/memberlist-nav
MidhunSureshR Jan 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions src/components/utils/Flex.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand All @@ -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";
Expand All @@ -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",
Expand All @@ -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,
Expand Down
46 changes: 28 additions & 18 deletions src/components/views/rooms/MemberList/MemberListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
);
};
Expand Down
6 changes: 3 additions & 3 deletions src/components/views/rooms/MemberList/tiles/common/MemberTileView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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}
Expand All @@ -39,7 +39,7 @@ export function MemberTileView(props: Props): JSX.Element {
{userLabelJsx}
{props.iconJsx}
</div>
</AccessibleButton>
</RovingAccessibleButton>
</div>
);
}
8 changes: 4 additions & 4 deletions test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Loading