Fix instances of decorated room avatar wrongly having their own tabIn…

…dex (#7730)
matrix-org · Feb 8, 2022 · 4501308 · 4501308
1 parent 5278679
commit 4501308
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 20 deletions.
diff --git a/src/components/views/rooms/RecentlyViewedButton.tsx b/src/components/views/rooms/RecentlyViewedButton.tsx
@@ -21,11 +21,11 @@ import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { MenuItem } from "../../structures/ContextMenu";
 import { useEventEmitterState } from "../../../hooks/useEventEmitter";
 import { _t } from "../../../languageHandler";
-import RoomAvatar from "../avatars/RoomAvatar";
 import dis from "../../../dispatcher/dispatcher";
 import InteractiveTooltip, { Direction } from "../elements/InteractiveTooltip";
 import { roomContextDetailsText } from "../../../Rooms";
 import { Action } from "../../../dispatcher/actions";
+import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 
 const RecentlyViewedButton = () => {
     const tooltipRef = useRef<InteractiveTooltip>();
@@ -47,7 +47,7 @@ const RecentlyViewedButton = () => {
                         tooltipRef.current?.hideTooltip();
                     }}
                 >
-                    <RoomAvatar room={crumb} width={24} height={24} />
+                    <DecoratedRoomAvatar room={crumb} avatarSize={24} tooltipProps={{ tabIndex: -1 }} />
                     <span className="mx_RecentlyViewedButton_entry_label">
                         <div>{ crumb.name }</div>
                         { contextDetails && <div className="mx_RecentlyViewedButton_entry_spaces">

diff --git a/src/components/views/rooms/RoomBreadcrumbs.tsx b/src/components/views/rooms/RoomBreadcrumbs.tsx
@@ -24,10 +24,11 @@ import { _t } from "../../../languageHandler";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import Analytics from "../../../Analytics";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
-import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
+import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
 import Toolbar from "../../../accessibility/Toolbar";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { Action } from "../../../dispatcher/actions";
+import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 
 interface IProps {
 }
@@ -43,6 +44,31 @@ interface IState {
     skipFirst: boolean;
 }
 
+const RoomBreadcrumbTile = ({ room, onClick }: { room: Room, onClick: () => void }) => {
+    const [onFocus, isActive, ref] = useRovingTabIndex();
+
+    return (
+        <AccessibleTooltipButton
+            className="mx_RoomBreadcrumbs_crumb"
+            onClick={onClick}
+            aria-label={_t("Room %(name)s", { name: room.name })}
+            title={room.name}
+            tooltipClassName="mx_RoomBreadcrumbs_Tooltip"
+            onFocus={onFocus}
+            inputRef={ref}
+            tabIndex={isActive ? 0 : -1}
+        >
+            <DecoratedRoomAvatar
+                room={room}
+                avatarSize={32}
+                displayBadge={true}
+                forceCount={true}
+                tooltipProps={{ tabIndex: isActive ? 0 : -1 }}
+            />
+        </AccessibleTooltipButton>
+    );
+};
+
 @replaceableComponent("views.rooms.RoomBreadcrumbs")
 export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState> {
     private isMounted = true;
@@ -87,23 +113,7 @@ export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState>
 
     public render(): React.ReactElement {
         const tiles = BreadcrumbsStore.instance.rooms.map((r, i) => {
-            return (
-                <RovingAccessibleTooltipButton
-                    className="mx_RoomBreadcrumbs_crumb"
-                    key={r.roomId}
-                    onClick={() => this.viewRoom(r, i)}
-                    aria-label={_t("Room %(name)s", { name: r.name })}
-                    title={r.name}
-                    tooltipClassName="mx_RoomBreadcrumbs_Tooltip"
-                >
-                    <DecoratedRoomAvatar
-                        room={r}
-                        avatarSize={32}
-                        displayBadge={true}
-                        forceCount={true}
-                    />
-                </RovingAccessibleTooltipButton>
-            );
+            return <RoomBreadcrumbTile key={r.roomId} room={r} onClick={() => this.viewRoom(r, i)} />;
         });
 
         if (tiles.length > 0) {