Improve accessibility of the room summary card (#12586)

* Improve accessibility of the room summary card

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

* Update @vector-im/compound-web to 4.5.0

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

* Update snapshots

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

* Fix bad merge

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/28217/head
Michael Telatynski 2024-06-17 09:27:15 +01:00 committed by GitHub
parent 5212ae8747
commit 5a1b98d8b7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 898 additions and 872 deletions

View File

@ -522,57 +522,68 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
<Separator /> <Separator />
<ToggleMenuItem <div role="menubar" aria-orientation="vertical">
Icon={FavouriteIcon} <ToggleMenuItem
label={_t("room|context_menu|favourite")} Icon={FavouriteIcon}
checked={isFavorite} label={_t("room|context_menu|favourite")}
onChange={() => tagRoom(room, DefaultTagID.Favourite)} checked={isFavorite}
// XXX: https://github.com/element-hq/compound/issues/288 onChange={() => tagRoom(room, DefaultTagID.Favourite)}
onSelect={() => {}} // XXX: https://github.com/element-hq/compound/issues/288
/> onSelect={() => {}}
<MenuItem />
Icon={UserAddIcon} <MenuItem
label={_t("action|invite")} Icon={UserAddIcon}
disabled={!canInviteToState} label={_t("action|invite")}
onSelect={() => inviteToRoom(room)} disabled={!canInviteToState}
/> onSelect={() => inviteToRoom(room)}
<MenuItem Icon={LinkIcon} label={_t("action|copy_link")} onSelect={onShareRoomClick} /> />
<MenuItem Icon={SettingsIcon} label={_t("common|settings")} onSelect={onRoomSettingsClick} /> <MenuItem Icon={LinkIcon} label={_t("action|copy_link")} onSelect={onShareRoomClick} />
<MenuItem Icon={SettingsIcon} label={_t("common|settings")} onSelect={onRoomSettingsClick} />
<Separator /> <Separator />
<MenuItem <MenuItem
// this icon matches the legacy implementation // this icon matches the legacy implementation
// and is a short term solution until legacy room header is removed // and is a short term solution until legacy room header is removed
Icon={UserProfileSolidIcon} Icon={UserProfileSolidIcon}
label={_t("common|people")} label={_t("common|people")}
onSelect={onRoomMembersClick} onSelect={onRoomMembersClick}
/> />
{!isVideoRoom && ( {!isVideoRoom && (
<> <>
<MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onSelect={onRoomFilesClick} /> <MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onSelect={onRoomFilesClick} />
<MenuItem
Icon={PollsIcon}
label={_t("right_panel|polls_button")}
onSelect={onRoomPollHistoryClick}
/>
{pinningEnabled && (
<MenuItem <MenuItem
Icon={PinIcon} Icon={PollsIcon}
label={_t("right_panel|pinned_messages_button")} label={_t("right_panel|polls_button")}
onSelect={onRoomPinsClick} onSelect={onRoomPollHistoryClick}
> />
<Text as="span" size="sm"> {pinningEnabled && (
{pinCount} <MenuItem
</Text> Icon={PinIcon}
</MenuItem> label={_t("right_panel|pinned_messages_button")}
)} onSelect={onRoomPinsClick}
<MenuItem Icon={ExportArchiveIcon} label={_t("export_chat|title")} onSelect={onRoomExportClick} /> >
</> <Text as="span" size="sm">
)} {pinCount}
</Text>
</MenuItem>
)}
<MenuItem
Icon={ExportArchiveIcon}
label={_t("export_chat|title")}
onSelect={onRoomExportClick}
/>
</>
)}
<Separator /> <Separator />
<MenuItem Icon={LeaveIcon} kind="critical" label={_t("action|leave_room")} onSelect={onLeaveRoomClick} /> <MenuItem
Icon={LeaveIcon}
kind="critical"
label={_t("action|leave_room")}
onSelect={onLeaveRoomClick}
/>
</div>
{SettingsStore.getValue(UIFeature.Widgets) && {SettingsStore.getValue(UIFeature.Widgets) &&
!isVideoRoom && !isVideoRoom &&