Improve new room header accessibility (#12725)

* Fix room header topic not showing on keyboard navigation whilst still using tabstops

Signed-off-by: Michael Telatynski <[email protected]>

* Fix keyboard activation of the room header FacePile

Signed-off-by: Michael Telatynski <[email protected]>

* Fix label on room header facepile

Signed-off-by: Michael Telatynski <[email protected]>

* Comment

Signed-off-by: Michael Telatynski <[email protected]>

* Update src/components/views/elements/FacePile.tsx

Co-authored-by: Richard van der Hoff <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>
Co-authored-by: Richard van der Hoff <[email protected]>

Author: t3chguy

res/css/views/rooms/_RoomHeader.pcss

@@ -74,14 +74,17 @@ limitations under the License.
     }
 }
 
-.mx_RoomHeader:hover .mx_RoomHeader_topic {
-    /* height needed to compute the transition, it equals to the `line-height`
+.mx_RoomHeader:hover,
+.mx_RoomHeader:focus-within {
+    .mx_RoomHeader_topic {
+        /* height needed to compute the transition, it equals to the `line-height`
         value in pixels */
-    height: calc($font-13px * 1.5);
-    opacity: 1;
+        height: calc($font-13px * 1.5);
+        opacity: 1;
 
-    a:hover {
-        text-decoration: underline;
+        a:hover {
+            text-decoration: underline;
+        }
     }
 }
 

src/components/views/elements/FacePile.tsx

@@ -21,7 +21,7 @@ import { AvatarStack, Tooltip } from "@vector-im/compound-web";
 import MemberAvatar from "../avatars/MemberAvatar";
 import AccessibleButton, { ButtonEvent } from "./AccessibleButton";
 
-interface IProps extends HTMLAttributes<HTMLSpanElement> {
+interface IProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     members: RoomMember[];
     size: string;
     overflow: boolean;
@@ -32,6 +32,11 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
     onClick?: (e: ButtonEvent) => void | Promise<void>;
 }
 
+/**
+ * A component which displays a list of avatars in a row, with a tooltip showing the names of the users.
+ *
+ * Any additional props, not named explicitly here, are passed to the underlying {@link AccessibleButton}.
+ */
 const FacePile: FC<IProps> = ({
     members,
     size,
@@ -40,19 +45,15 @@ const FacePile: FC<IProps> = ({
     tooltipShortcut,
     children,
     viewUserOnClick = true,
+    onClick,
     ...props
 }) => {
     const faces = members.map(
         tooltipLabel
             ? (m) => <MemberAvatar key={m.userId} member={m} size={size} hideTitle />
             : (m) => (
                   <Tooltip key={m.userId} label={m.name} caption={tooltipShortcut}>
-                      <MemberAvatar
-                          member={m}
-                          size={size}
-                          viewUserOnClick={!props.onClick && viewUserOnClick}
-                          hideTitle
-                      />
+                      <MemberAvatar member={m} size={size} viewUserOnClick={!onClick && viewUserOnClick} hideTitle />
                   </Tooltip>
               ),
     );
@@ -65,7 +66,7 @@ const FacePile: FC<IProps> = ({
     );
 
     const content = (
-        <AccessibleButton className="mx_FacePile" onClick={props.onClick ?? null}>
+        <AccessibleButton {...props} className="mx_FacePile" onClick={onClick ?? null}>
             <AvatarStack>{pileContents}</AvatarStack>
             {children}
         </AccessibleButton>

src/components/views/rooms/RoomHeader.tsx

@@ -55,6 +55,7 @@ import { RoomKnocksBar } from "./RoomKnocksBar";
 import { isVideoRoom } from "../../../utils/video-rooms";
 import { notificationLevelToIndicator } from "../../../utils/notifications";
 import { CallGuestLinkButton } from "./RoomHeader/CallGuestLinkButton";
+import { ButtonEvent } from "../elements/AccessibleButton";
 
 export default function RoomHeader({
     room,
@@ -364,23 +365,19 @@ export default function RoomHeader({
                     )}
                 </Flex>
                 {!isDirectMessage && (
-                    <BodyText
-                        as="div"
-                        size="sm"
-                        weight="medium"
-                        aria-label={_t("common|n_members", { count: memberCount })}
-                        onClick={(e: React.MouseEvent) => {
-                            RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomMemberList);
-                            e.stopPropagation();
-                        }}
-                    >
+                    <BodyText as="div" size="sm" weight="medium">
                         <FacePile
                             className="mx_RoomHeader_members"
                             members={members.slice(0, 3)}
                             size="20px"
                             overflow={false}
                             viewUserOnClick={false}
                             tooltipLabel={_t("room|header_face_pile_tooltip")}
+                            onClick={(e: ButtonEvent) => {
+                                RightPanelStore.instance.showOrHidePanel(RightPanelPhases.RoomMemberList);
+                                e.stopPropagation();
+                            }}
+                            aria-label={_t("common|n_members", { count: memberCount })}
                         >
                             {formatCount(memberCount)}
                         </FacePile>