Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Improve new room header accessibility #12725

Merged
merged 5 commits into from
Jul 8, 2024
Merged

Improve new room header accessibility #12725

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cb4ade9
Fix room header topic not showing on keyboard navigation whilst still…
t3chguy Jul 4, 2024
0f17ee6
Fix keyboard activation of the room header FacePile
t3chguy Jul 4, 2024
5c59bdb
Fix label on room header facepile
t3chguy Jul 4, 2024
4185a40
Comment
t3chguy Jul 5, 2024
5058f80
Update src/components/views/elements/FacePile.tsx
t3chguy Jul 8, 2024
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
9 changes: 5 additions & 4 deletions src/components/views/rooms/RoomHeader.tsx
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix keyboard activation of the room header FacePile

Guess I'm not sure what a room header FacePile is either :/

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

The FacePile component within the RoomHeader component

Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -369,10 +370,6 @@ export default function RoomHeader({
size="sm"
weight="medium"
aria-label={_t("common|n_members", { count: memberCount })}
onClick={(e: React.MouseEvent) => {
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomMemberList);
e.stopPropagation();
}}
>
<FacePile
className="mx_RoomHeader_members"
Expand All @@ -381,6 +378,10 @@ 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();
}}
>
{formatCount(memberCount)}
</FacePile>
Expand Down
Loading