From cd985d6d6a7edd357527b1b2747a3ef2654aabbd Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Wed, 29 Nov 2023 10:15:21 +1300
Subject: [PATCH] make room info button to open room details (#11951)

---
 res/css/views/rooms/_RoomHeader.pcss          |  16 ++-
 src/components/views/rooms/RoomHeader.tsx     | 119 +++++++++---------
 .../__snapshots__/RoomHeader-test.tsx.snap    |  52 ++++----
 3 files changed, 105 insertions(+), 82 deletions(-)

diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss
index f094be8b86..a93366f520 100644
--- a/res/css/views/rooms/_RoomHeader.pcss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@@ -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);
diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index c19a649e48..92d7c78ac9 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -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();
diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
index 2a06a7d6ae..dc2f916bc0 100644
--- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
@@ -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;"
+    <button
+      aria-label="Room info"
+      class="mx_RoomHeader_infoWrapper"
+      tabindex="0"
     >
-      !
-    </span>
-    <div
-      class="mx_Box mx_RoomHeader_info mx_Box--flex"
-      style="--mx-box-flex: 1;"
-    >
-      <div
-        aria-level="1"
-        class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
-        dir="auto"
-        role="heading"
+      <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
-          class="mx_RoomHeader_truncated mx_lineClamp"
+        !
+      </span>
+      <div
+        class="mx_Box mx_RoomHeader_info mx_Box--flex"
+        style="--mx-box-flex: 1;"
+      >
+        <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);"