Tooltip: improve accessibility of spaces (#12497)

* Migrate to `AccessibleButtons`

* Update snapshots

src/components/structures/LeftPanel.tsx

@@ -26,7 +26,6 @@ import { HEADER_HEIGHT } from "../views/rooms/RoomSublist";
 import { Action } from "../../dispatcher/actions";
 import RoomSearch from "./RoomSearch";
 import ResizeNotifier from "../../utils/ResizeNotifier";
-import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import SpaceStore from "../../stores/spaces/SpaceStore";
 import { MetaSpace, SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/spaces";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
@@ -41,7 +40,7 @@ import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../settings/UIFeature";
-import { ButtonEvent } from "../views/elements/AccessibleButton";
+import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
 import PosthogTrackers from "../../PosthogTrackers";
 import PageType from "../../PageTypes";
 import { UserOnboardingButton } from "../views/user-onboarding/UserOnboardingButton";
@@ -333,7 +332,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         // to start a new call
         if (LegacyCallHandler.instance.getSupportsPstnProtocol()) {
             dialPadButton = (
-                <AccessibleTooltipButton
+                <AccessibleButton
                     className={classNames("mx_LeftPanel_dialPadButton", {})}
                     onClick={this.onDialPad}
                     title={_t("left_panel|open_dial_pad")}
@@ -344,7 +343,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         let rightButton: JSX.Element | undefined;
         if (this.state.activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms)) {
             rightButton = (
-                <AccessibleTooltipButton
+                <AccessibleButton
                     className="mx_LeftPanel_exploreButton"
                     onClick={this.onExplore}
                     title={_t("action|explore_rooms")}

src/components/structures/SpaceHierarchy.tsx

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import React, {
-    ComponentProps,
     Dispatch,
     KeyboardEvent,
     KeyboardEventHandler,
@@ -62,7 +61,6 @@ import InfoTooltip from "../views/elements/InfoTooltip";
 import TextWithTooltip from "../views/elements/TextWithTooltip";
 import { useStateToggle } from "../../hooks/useStateToggle";
 import { getChildOrder } from "../../stores/spaces/SpaceStore";
-import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import { Linkify, topicToHtml } from "../../HtmlUtils";
 import { useDispatcher } from "../../hooks/useDispatcher";
 import { Action } from "../../dispatcher/actions";
@@ -75,7 +73,6 @@ import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import { JoinRoomReadyPayload } from "../../dispatcher/payloads/JoinRoomReadyPayload";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
-import { Alignment } from "../views/elements/Tooltip";
 import { getTopic } from "../../hooks/room/useTopic";
 import { SdkContextClass } from "../../contexts/SDKContext";
 import { getDisplayAliasForAliasSet } from "../../Rooms";
@@ -148,7 +145,7 @@ const Tile: React.FC<ITileProps> = ({
     let button: ReactElement;
     if (busy) {
         button = (
-            <AccessibleTooltipButton
+            <AccessibleButton
                 disabled={true}
                 onClick={onJoinClick}
                 kind="primary_outline"
@@ -157,7 +154,7 @@ const Tile: React.FC<ITileProps> = ({
                 title={_t("space|joining_space")}
             >
                 <Spinner w={24} h={24} />
-            </AccessibleTooltipButton>
+            </AccessibleButton>
         );
     } else if (joinedRoom || room.join_rule === JoinRule.Knock) {
         // If the room is knockable, show the "View" button even if we are not a member; that
@@ -670,25 +667,16 @@ const ManageButtons: React.FC<IManageButtonsProps> = ({ hierarchy, selected, set
 
     const disabled = !selectedRelations.length || removing || saving;
 
-    let Button: React.ComponentType<React.ComponentProps<typeof AccessibleButton>> = AccessibleButton;
-    let props: Partial<ComponentProps<typeof AccessibleTooltipButton>> = {};
-    if (!selectedRelations.length) {
-        Button = AccessibleTooltipButton;
-        props = {
-            tooltip: _t("space|select_room_below"),
-            alignment: Alignment.Top,
-        };
-    }
-
     let buttonText = _t("common|saving");
     if (!saving) {
         buttonText = selectionAllSuggested ? _t("space|unmark_suggested") : _t("space|mark_suggested");
     }
 
+    const title = !selectedRelations.length ? _t("space|select_room_below") : undefined;
+
     return (
         <>
-            <Button
-                {...props}
+            <AccessibleButton
                 onClick={async (): Promise<void> => {
                     setRemoving(true);
                     try {
@@ -719,11 +707,13 @@ const ManageButtons: React.FC<IManageButtonsProps> = ({ hierarchy, selected, set
                 }}
                 kind="danger_outline"
                 disabled={disabled}
+                aria-label={removing ? _t("redact|ongoing") : _t("action|remove")}
+                title={title}
+                placement="top"
             >
                 {removing ? _t("redact|ongoing") : _t("action|remove")}
-            </Button>
-            <Button
-                {...props}
+            </AccessibleButton>
+            <AccessibleButton
                 onClick={async (): Promise<void> => {
                     setSaving(true);
                     try {
@@ -750,9 +740,12 @@ const ManageButtons: React.FC<IManageButtonsProps> = ({ hierarchy, selected, set
                 }}
                 kind="primary_outline"
                 disabled={disabled}
+                aria-label={buttonText}
+                title={title}
+                placement="top"
             >
                 {buttonText}
-            </Button>
+            </AccessibleButton>
         </>
     );
 };

src/components/structures/SpaceRoomView.tsx

@@ -60,7 +60,6 @@ import {
     defaultRoomsRenderer,
 } from "../views/dialogs/AddExistingToSpaceDialog";
 import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
-import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
 import ErrorBoundary from "../views/elements/ErrorBoundary";
 import Field from "../views/elements/Field";
 import RoomFacePile from "../views/elements/RoomFacePile";
@@ -248,7 +247,7 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => {
     let settingsButton;
     if (shouldShowSpaceSettings(space)) {
         settingsButton = (
-            <AccessibleTooltipButton
+            <AccessibleButton
                 className="mx_SpaceRoomView_landing_settingsButton"
                 onClick={() => {
                     showSpaceSettings(space);