make room info button to open room details (#11951)

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);

src/components/views/rooms/RoomHeader.tsx

@@ -116,14 +116,14 @@ export default function RoomHeader({
     );
 
     return (
-        <Flex
+        <Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
-            as="header"
+            <button
-            align="center"
+                aria-label={_t("right_panel|room_summary_card|title")}
-            gap="var(--cpd-space-3x)"
+                tabIndex={0}
-            className="mx_RoomHeader light-panel"
                 onClick={() => {
                     RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomSummary);
                 }}
+                className="mx_RoomHeader_infoWrapper"
             >
                 <RoomAvatar room={room} size="40px" />
                 <Box flex="1" className="mx_RoomHeader_info">
@@ -172,11 +172,16 @@ export default function RoomHeader({
                         )}
                     </BodyText>
                     {roomTopic && (
-                    <BodyText as="div" size="sm" className="mx_RoomHeader_topic mx_RoomHeader_truncated mx_lineClamp">
+                        <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();

test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap

@@ -5,6 +5,11 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
   <header
     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);"
+  >
+    <button
+      aria-label="Room info"
+      class="mx_RoomHeader_infoWrapper"
+      tabindex="0"
     >
       <span
         class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
@@ -33,6 +38,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
           </span>
         </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);"