imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

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>