nikrozman/element-web
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Improve new room header accessibility (#12725)

Browse Source 
* Fix room header topic not showing on keyboard navigation whilst still using tabstops

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix keyboard activation of the room header FacePile

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix label on room header facepile

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Comment

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update src/components/views/elements/FacePile.tsx

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
Michael Telatynski
2024-07-08 12:52:26 +01:00
committed by GitHub
parent b2a89151e6
commit 466f37a83d
3 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/views/elements/FacePile.tsx
View File

@@ -21,7 +21,7 @@ import { AvatarStack, Tooltip } from "@vector-im/compound-web";
import MemberAvatar from "../avatars/MemberAvatar";
import AccessibleButton, { ButtonEvent } from "./AccessibleButton";
interface IProps extends HTMLAttributes<HTMLSpanElement> {
interface IProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
members: RoomMember[];
size: string;
overflow: boolean;
@@ -32,6 +32,11 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
onClick?: (e: ButtonEvent) => void | Promise<void>;
}
/**
* A component which displays a list of avatars in a row, with a tooltip showing the names of the users.
*
* Any additional props, not named explicitly here, are passed to the underlying {@link AccessibleButton}.
*/
const FacePile: FC<IProps> = ({
members,
size,
@@ -40,6 +45,7 @@ const FacePile: FC<IProps> = ({
tooltipShortcut,
children,
viewUserOnClick = true,
onClick,
...props
}) => {
const faces = members.map(
@@ -47,12 +53,7 @@ const FacePile: FC<IProps> = ({
? (m) => <MemberAvatar key={m.userId} member={m} size={size} hideTitle />
: (m) => (
<Tooltip key={m.userId} label={m.name} caption={tooltipShortcut}>
<MemberAvatar
member={m}
size={size}
viewUserOnClick={!props.onClick && viewUserOnClick}
hideTitle
/>
<MemberAvatar member={m} size={size} viewUserOnClick={!onClick && viewUserOnClick} hideTitle />
</Tooltip>
),
);
@@ -65,7 +66,7 @@ const FacePile: FC<IProps> = ({
);
const content = (
<AccessibleButton className="mx_FacePile" onClick={props.onClick ?? null}>
<AccessibleButton {...props} className="mx_FacePile" onClick={onClick ?? null}>
<AvatarStack>{pileContents}</AvatarStack>
{children}
</AccessibleButton>