PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 25 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
res/css/views/rooms/_RoomHeader.pcss
View file

@ -74,14 +74,17 @@ limitations under the License.
}
}
.mx_RoomHeader:hover .mx_RoomHeader_topic {
/* height needed to compute the transition, it equals to the `line-height`
.mx_RoomHeader:hover,
.mx_RoomHeader:focus-within {
.mx_RoomHeader_topic {
/* height needed to compute the transition, it equals to the `line-height`
value in pixels */
height: calc($font-13px * 1.5);
opacity: 1;
height: calc($font-13px * 1.5);
opacity: 1;
a:hover {
text-decoration: underline;
a:hover {
text-decoration: underline;
}
}
}

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>

17
src/components/views/rooms/RoomHeader.tsx
View file

@ -55,6 +55,7 @@ import { RoomKnocksBar } from "./RoomKnocksBar";
import { isVideoRoom } from "../../../utils/video-rooms";
import { notificationLevelToIndicator } from "../../../utils/notifications";
import { CallGuestLinkButton } from "./RoomHeader/CallGuestLinkButton";
import { ButtonEvent } from "../elements/AccessibleButton";
export default function RoomHeader({
room,
@ -364,16 +365,7 @@ export default function RoomHeader({
)}
</Flex>
{!isDirectMessage && (
<BodyText
as="div"
size="sm"
weight="medium"
aria-label={_t("common|n_members", { count: memberCount })}
onClick={(e: React.MouseEvent) => {
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomMemberList);
e.stopPropagation();
}}
>
<BodyText as="div" size="sm" weight="medium">
<FacePile
className="mx_RoomHeader_members"
members={members.slice(0, 3)}
@ -381,6 +373,11 @@ export default function RoomHeader({
overflow={false}
viewUserOnClick={false}
tooltipLabel={_t("room|header_face_pile_tooltip")}
onClick={(e: ButtonEvent) => {
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomMemberList);
e.stopPropagation();
}}
aria-label={_t("common|n_members", { count: memberCount })}
>
{formatCount(memberCount)}
</FacePile>