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

Room header: make room details toggle accessible by keyboard #11951

Merged
merged 2 commits into from
Nov 29, 2023
Merged

Room header: make room details toggle accessible by keyboard #11951

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d66ad28
make room info button to open room details
Nov 28, 2023
174f4b8
Merge branch 'develop' into kerry/26656/room-header-a11y
Nov 28, 2023
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
16 changes: 14 additions & 2 deletions res/css/views/rooms/_RoomHeader.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,27 @@ limitations under the License.
border-bottom: 1px solid $separator;
background-color: $background;
transition: all 0.3s ease;
cursor: pointer;
}

.mx_RoomHeader:hover {
background-color: $header-panel-bg-hover;
}

.mx_RoomHeader_info {
.mx_RoomHeader_infoWrapper {
// unset button styles
background: unset;
border: unset;
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
cursor: pointer;
gap: var(--cpd-space-3x);
text-align: left;
}

.mx_RoomHeader_info {
/* We want the spacing to be 64px, 13x = 52px but we have a flex gap of
12px set on the flex container, which sums up to 64 */
padding-right: var(--cpd-space-13x);
Expand Down
119 changes: 62 additions & 57 deletions src/components/views/rooms/RoomHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,67 +116,72 @@ export default function RoomHeader({
);

return (
<Flex
as="header"
align="center"
gap="var(--cpd-space-3x)"
className="mx_RoomHeader light-panel"
onClick={() => {
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
}}
>
<RoomAvatar room={room} size="40px" />
<Box flex="1" className="mx_RoomHeader_info">
<BodyText
as="div"
size="lg"
weight="semibold"
dir="auto"
role="heading"
aria-level={1}
className="mx_RoomHeader_heading"
>
<span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>
<Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
<button
aria-label={_t("right_panel|room_summary_card|title")}
tabIndex={0}
onClick={() => {
RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
}}
className="mx_RoomHeader_infoWrapper"
>
<RoomAvatar room={room} size="40px" />
<Box flex="1" className="mx_RoomHeader_info">
<BodyText
as="div"
size="lg"
weight="semibold"
dir="auto"
role="heading"
aria-level={1}
className="mx_RoomHeader_heading"
>
<span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>

{!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
<Tooltip label={_t("common|public_room")} side="right">
<PublicIcon
width="16px"
height="16px"
className="mx_RoomHeader_icon text-secondary"
aria-label={_t("common|public_room")}
/>
</Tooltip>
)}
{!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
<Tooltip label={_t("common|public_room")} side="right">
<PublicIcon
width="16px"
height="16px"
className="mx_RoomHeader_icon text-secondary"
aria-label={_t("common|public_room")}
/>
</Tooltip>
)}

{isDirectMessage && e2eStatus === E2EStatus.Verified && (
<Tooltip label={_t("common|verified")} side="right">
<VerifiedIcon
width="16px"
height="16px"
className="mx_RoomHeader_icon mx_Verified"
aria-label={_t("common|verified")}
/>
</Tooltip>
)}
{isDirectMessage && e2eStatus === E2EStatus.Verified && (
<Tooltip label={_t("common|verified")} side="right">
<VerifiedIcon
width="16px"
height="16px"
className="mx_RoomHeader_icon mx_Verified"
aria-label={_t("common|verified")}
/>
</Tooltip>
)}

{isDirectMessage && e2eStatus === E2EStatus.Warning && (
<Tooltip label={_t("room|header_untrusted_label")} side="right">
<ErrorIcon
width="16px"
height="16px"
className="mx_RoomHeader_icon mx_Untrusted"
aria-label={_t("room|header_untrusted_label")}
/>
</Tooltip>
)}
</BodyText>
{roomTopic && (
<BodyText as="div" size="sm" className="mx_RoomHeader_topic mx_RoomHeader_truncated mx_lineClamp">
<Linkify>{roomTopicBody}</Linkify>
{isDirectMessage && e2eStatus === E2EStatus.Warning && (
<Tooltip label={_t("room|header_untrusted_label")} side="right">
<ErrorIcon
width="16px"
height="16px"
className="mx_RoomHeader_icon mx_Untrusted"
aria-label={_t("room|header_untrusted_label")}
/>
</Tooltip>
)}
</BodyText>
)}
</Box>
{roomTopic && (
<BodyText
as="div"
size="sm"
className="mx_RoomHeader_topic mx_RoomHeader_truncated mx_lineClamp"
>
<Linkify>{roomTopicBody}</Linkify>
</BodyText>
)}
</Box>
</button>
<Flex as="nav" align="center" gap="var(--cpd-space-2x)">
{additionalButtons?.map((props) => {
const label = props.label();
Expand Down
50 changes: 28 additions & 22 deletions test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,39 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
>
<span
class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
data-color="7"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
>
!
</span>
<div
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
<button
aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
>
<span
class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
data-color="7"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
>
!
</span>
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
<div
aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
>
!1:example.org
</span>
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
!1:example.org
</span>
</div>
</div>
</div>
</button>
<nav
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
Expand Down
Loading