Tooltip: improve accessibility of the right panel (#12490)

* Move to `AccessibleButton` * Update snapshots * Update playwright snapshots
matrix-org · May 3, 2024 · 95ee297 · 95ee297
1 parent 3059b5b
commit 95ee297
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 12 deletions.
diff --git a/playwright/snapshots/room/room-header.spec.ts/room-header-highlighted-linux.png b/playwright/snapshots/room/room-header.spec.ts/room-header-highlighted-linux.png
diff --git a/...room/room-header.spec.ts/room-header-with-apps-button-not-highlighted-linux.png b/...room/room-header.spec.ts/room-header-with-apps-button-not-highlighted-linux.png
diff --git a/src/components/views/right_panel/HeaderButton.tsx b/src/components/views/right_panel/HeaderButton.tsx
@@ -21,9 +21,7 @@ limitations under the License.
 import React, { ReactNode } from "react";
 import classNames from "classnames";
 
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-import { ButtonEvent } from "../elements/AccessibleButton";
-import { Alignment } from "../elements/Tooltip";
+import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 
 interface IProps {
     // Whether this button is highlighted
@@ -52,11 +50,11 @@ export default class HeaderButton extends React.Component<IProps> {
         });
 
         return (
-            <AccessibleTooltipButton
+            <AccessibleButton
                 {...props}
                 aria-current={isHighlighted ? "true" : "false"}
                 title={title}
-                alignment={Alignment.Bottom}
+                placement="bottom"
                 className={classes}
                 onClick={onClick}
             />

diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -49,7 +49,6 @@ import WidgetUtils from "../../../utils/WidgetUtils";
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
 import WidgetAvatar from "../avatars/WidgetAvatar";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import WidgetStore, { IApp } from "../../../stores/WidgetStore";
 import { E2EStatus } from "../../../utils/ShieldUtils";
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
@@ -184,18 +183,17 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
 
     return (
         <div className={classes} ref={handle}>
-            <AccessibleTooltipButton
+            <AccessibleButton
                 className="mx_RoomSummaryCard_icon_app"
                 onClick={onOpenWidgetClick}
                 // only show a tooltip if the widget is pinned
-                title={openTitle}
-                forceHide={!(isPinned || isMaximised)}
+                title={!(isPinned || isMaximised) ? undefined : openTitle}
                 disabled={isPinned || isMaximised}
             >
                 <WidgetAvatar app={app} size="20px" />
                 <span>{name}</span>
                 {subtitle}
-            </AccessibleTooltipButton>
+            </AccessibleButton>
 
             {canModifyWidget && (
                 <ContextMenuTooltipButton
@@ -206,13 +204,13 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
                 />
             )}
 
-            <AccessibleTooltipButton
+            <AccessibleButton
                 className="mx_RoomSummaryCard_app_pinToggle"
                 onClick={togglePin}
                 title={pinTitle}
                 disabled={cannotPin}
             />
-            <AccessibleTooltipButton
+            <AccessibleButton
                 className="mx_RoomSummaryCard_app_maximiseToggle"
                 onClick={toggleMaximised}
                 title={maximiseTitle}

diff --git a/test/components/views/right_panel/__snapshots__/LegacyRoomHeaderButtons-test.tsx.snap b/test/components/views/right_panel/__snapshots__/LegacyRoomHeaderButtons-test.tsx.snap
@@ -6,13 +6,15 @@ exports[`LegacyRoomHeaderButtons-test.tsx should render 1`] = `
     aria-current="false"
     aria-label="Chat"
     class="mx_AccessibleButton mx_LegacyRoomHeader_button mx_RightPanel_timelineCardButton"
+    data-state="closed"
     role="button"
     tabindex="0"
   />
   <div
     aria-current="false"
     aria-label="Threads"
     class="mx_AccessibleButton mx_LegacyRoomHeader_button mx_RightPanel_threadsButton"
+    data-state="closed"
     data-testid="threadsButton"
     role="button"
     tabindex="0"
@@ -21,6 +23,7 @@ exports[`LegacyRoomHeaderButtons-test.tsx should render 1`] = `
     aria-current="false"
     aria-label="Room info"
     class="mx_AccessibleButton mx_LegacyRoomHeader_button mx_RightPanel_roomSummaryButton"
+    data-state="closed"
     role="button"
     tabindex="0"
   />