From e221a141eb6a84bf26b7075bcb2d491eb19573b6 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 24 Sep 2024 17:09:35 +0100 Subject: [PATCH 1/5] Open room settings on room header avatar click Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/rooms/RoomHeader.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index b61f8fc620..2469ddc36d 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -50,6 +50,8 @@ import WithPresenceIndicator, { useDmMember } from "../avatars/WithPresenceIndic import { IOOBData } from "../../../stores/ThreepidInviteStore"; import RoomContext from "../../../contexts/RoomContext"; import { MainSplitContentType } from "../../structures/RoomView"; +import defaultDispatcher from "../../../dispatcher/dispatcher.ts"; +import { RoomSettingsTab } from "../dialogs/RoomSettingsDialog.tsx"; export default function RoomHeader({ room, @@ -229,6 +231,13 @@ export default function RoomHeader({ roomContext.mainSplitContentType === MainSplitContentType.MaximisedWidget || roomContext.mainSplitContentType === MainSplitContentType.Call; + const onAvatarClick = (): void => { + defaultDispatcher.dispatch({ + action: "open_room_settings", + initial_tab_id: RoomSettingsTab.General, + }); + }; + return ( <> @@ -239,7 +248,7 @@ export default function RoomHeader({ className="mx_RoomHeader_infoWrapper" > - + Date: Tue, 24 Sep 2024 17:53:07 +0100 Subject: [PATCH 2/5] Fix nested interactive elements aria fail Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/rooms/_RoomHeader.pcss | 4 +++- src/components/views/avatars/BaseAvatar.tsx | 3 ++- src/components/views/rooms/RoomHeader.tsx | 14 +++++++++++--- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss index 2e5b2aa71b..16bf45435a 100644 --- a/res/css/views/rooms/_RoomHeader.pcss +++ b/res/css/views/rooms/_RoomHeader.pcss @@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details. .mx_RoomHeader { height: 64px; box-sizing: border-box; - padding: 0 var(--cpd-space-3x); + padding: 0 var(--cpd-space-3x) 0 calc(var(--cpd-space-3x) + var(--cpd-space-1-5x)); border-bottom: 1px solid $separator; background-color: $background; transition: all 0.2s ease; @@ -31,6 +31,8 @@ Please see LICENSE files in the repository root for full details. cursor: pointer; gap: var(--cpd-space-3x); text-align: left; + height: 100%; + padding: 0; } .mx_RoomHeader_info { diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx index 63beae20cf..db74d7b95e 100644 --- a/src/components/views/avatars/BaseAvatar.tsx +++ b/src/components/views/avatars/BaseAvatar.tsx @@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only Please see LICENSE files in the repository root for full details. */ -import React, { forwardRef, useCallback, useContext, useEffect, useState } from "react"; +import React, { AriaRole, forwardRef, useCallback, useContext, useEffect, useState } from "react"; import classNames from "classnames"; import { ClientEvent, SyncState } from "matrix-js-sdk/src/matrix"; import { Avatar } from "@vector-im/compound-web"; @@ -33,6 +33,7 @@ interface IProps { className?: string; tabIndex?: number; altText?: string; + role?: AriaRole; } const calculateUrls = (url?: string | null, urls?: string[], lowBandwidth = false): string[] => { diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index 2469ddc36d..06e40f6e55 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -241,15 +241,23 @@ export default function RoomHeader({ return ( <> + + {/* We hide this from the tabIndex list as it is a mouse only shortcut and superfluous for a11y */} + +