diff --git a/src/components/views/beta/BetaCard.tsx b/src/components/views/beta/BetaCard.tsx
index 84c7a27fe0f..f8144ae1442 100644
--- a/src/components/views/beta/BetaCard.tsx
+++ b/src/components/views/beta/BetaCard.tsx
@@ -27,7 +27,6 @@ import SdkConfig from "../../../SdkConfig";
 import SettingsFlag from "../elements/SettingsFlag";
 import { useFeatureEnabled } from "../../../hooks/useSettings";
 import InlineSpinner from "../elements/InlineSpinner";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { shouldShowFeedback } from "../../../utils/Feedback";
 
 // XXX: Keep this around for re-use in future Betas
@@ -50,19 +49,14 @@ export const BetaPill: React.FC<IBetaPillProps> = ({
 }) => {
     if (onClick) {
         return (
-            <AccessibleTooltipButton
+            <AccessibleButton
                 className="mx_BetaCard_betaPill"
-                title={`${tooltipTitle} ${tooltipCaption}`}
-                tooltip={
-                    <div>
-                        <div className="mx_Tooltip_title">{tooltipTitle}</div>
-                        <div className="mx_Tooltip_sub">{tooltipCaption}</div>
-                    </div>
-                }
+                title={tooltipTitle}
+                caption={tooltipCaption}
                 onClick={onClick}
             >
                 {_t("common|beta")}
-            </AccessibleTooltipButton>
+            </AccessibleButton>
         );
     }
 
diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx
index 1eb03792b8d..8d334314e17 100644
--- a/src/components/views/elements/AccessibleButton.tsx
+++ b/src/components/views/elements/AccessibleButton.tsx
@@ -16,6 +16,7 @@
 
 import React, { forwardRef, FunctionComponent, HTMLAttributes, InputHTMLAttributes, Ref } from "react";
 import classnames from "classnames";
+import { Tooltip } from "@vector-im/compound-web";
 
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
@@ -86,6 +87,14 @@ type Props<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> &
      * Event handler for button activation. Should be implemented exactly like a normal `onClick` handler.
      */
     onClick: ((e: ButtonEvent) => void | Promise<void>) | null;
+    /**
+     * The tooltip to show on hover or focus.
+     */
+    title?: string;
+    /**
+     * The caption to show within a tooltip as above, only valid when used in conjunction with `title`.
+     */
+    caption?: string;
 };
 
 /**
@@ -116,10 +125,13 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
         onKeyDown,
         onKeyUp,
         triggerOnMouseDown,
+        caption,
         ...restProps
     }: Props<T>,
     ref: Ref<HTMLElement>,
 ): JSX.Element {
+    const { title } = restProps;
+
     const newProps: RenderedElementProps = restProps;
     if (disabled) {
         newProps["aria-disabled"] = true;
@@ -182,7 +194,16 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
     });
 
     // React.createElement expects InputHTMLAttributes
-    return React.createElement(element, newProps, children);
+    const button = React.createElement(element, newProps, children);
+
+    if (title) {
+        return (
+            <Tooltip label={title} caption={caption} isTriggerInteractive={!disabled}>
+                {button}
+            </Tooltip>
+        );
+    }
+    return button;
 });
 
 // Type assertion required due to forwardRef type workaround in react.d.ts
diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx
index 0af5cc9625f..4bb5d6effff 100644
--- a/src/components/views/elements/AccessibleTooltipButton.tsx
+++ b/src/components/views/elements/AccessibleTooltipButton.tsx
@@ -60,6 +60,9 @@ type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof Access
     onHideTooltip?(ev: SyntheticEvent): void;
 };
 
+/**
+ * @deprecated use AccessibleButton with `title` and `caption` instead.
+ */
 const AccessibleTooltipButton = forwardRef(function <T extends keyof JSX.IntrinsicElements>(
     { title, tooltip, children, forceHide, alignment, onHideTooltip, tooltipClassName, ...props }: Props<T>,
     ref: Ref<HTMLElement>,
diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx
index 7a1b641791a..e0c2d19f3f9 100644
--- a/src/components/views/elements/AppTile.tsx
+++ b/src/components/views/elements/AppTile.tsx
@@ -25,7 +25,6 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
 import { ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
 
-import AccessibleButton from "./AccessibleButton";
 import { _t } from "../../../languageHandler";
 import AppPermission from "./AppPermission";
 import AppWarning from "./AppWarning";
@@ -58,6 +57,7 @@ import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingSto
 import { SdkContextClass } from "../../../contexts/SDKContext";
 import { ModuleRunner } from "../../../modules/ModuleRunner";
 import { parseUrl } from "../../../utils/UrlUtils";
+import AccessibleTooltipButton from "./AccessibleTooltipButton";
 
 interface IProps {
     app: IWidget | IApp;
@@ -749,7 +749,7 @@ export default class AppTile extends React.Component<IProps, IState> {
                 WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Center);
 
             layoutButtons.push(
-                <AccessibleButton
+                <AccessibleTooltipButton
                     key="toggleMaximised"
                     className="mx_AppTileMenuBar_widgets_button"
                     title={isMaximised ? _t("widget|unmaximise") : _t("action|maximise")}
@@ -760,18 +760,18 @@ export default class AppTile extends React.Component<IProps, IState> {
                     ) : (
                         <MaximiseIcon className="mx_Icon mx_Icon_12" />
                     )}
-                </AccessibleButton>,
+                </AccessibleTooltipButton>,
             );
 
             layoutButtons.push(
-                <AccessibleButton
+                <AccessibleTooltipButton
                     key="minimise"
                     className="mx_AppTileMenuBar_widgets_button"
                     title={_t("action|minimise")}
                     onClick={this.onMinimiseClicked}
                 >
                     <MinimiseIcon className="mx_Icon mx_Icon_12" />
-                </AccessibleButton>,
+                </AccessibleTooltipButton>,
             );
         }
 
@@ -789,13 +789,13 @@ export default class AppTile extends React.Component<IProps, IState> {
                             <span className="mx_AppTileMenuBar_widgets">
                                 {layoutButtons}
                                 {this.props.showPopout && !this.state.requiresClient && (
-                                    <AccessibleButton
+                                    <AccessibleTooltipButton
                                         className="mx_AppTileMenuBar_widgets_button"
                                         title={_t("widget|popout")}
                                         onClick={this.onPopoutWidgetClick}
                                     >
                                         <PopoutIcon className="mx_Icon mx_Icon_12 mx_Icon--stroke" />
-                                    </AccessibleButton>
+                                    </AccessibleTooltipButton>
                                 )}
                                 {this.state.hasContextMenuOptions && (
                                     <ContextMenuButton
diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx
index f0b5c70f17d..1f9b3704de7 100644
--- a/src/components/views/messages/TextualBody.tsx
+++ b/src/components/views/messages/TextualBody.tsx
@@ -31,7 +31,6 @@ import { tooltipifyLinks, unmountTooltips } from "../../../utils/tooltipify";
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import { isPermalinkHost, tryTransformPermalinkToLocalHref } from "../../../utils/permalinks/Permalinks";
 import { copyPlaintext } from "../../../utils/strings";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import UIStore from "../../../stores/UIStore";
 import { Action } from "../../../dispatcher/actions";
 import GenericTextContextMenu from "../context_menus/GenericTextContextMenu";
@@ -522,22 +521,15 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         const date = this.props.mxEvent.replacingEventDate();
         const dateString = date && formatDate(date);
 
-        const tooltip = (
-            <div>
-                <div className="mx_Tooltip_title">{_t("timeline|edits|tooltip_title", { date: dateString })}</div>
-                <div className="mx_Tooltip_sub">{_t("timeline|edits|tooltip_sub")}</div>
-            </div>
-        );
-
         return (
-            <AccessibleTooltipButton
+            <AccessibleButton
                 className="mx_EventTile_edited"
                 onClick={this.openHistoryDialog}
-                title={_t("timeline|edits|tooltip_label", { date: dateString })}
-                tooltip={tooltip}
+                title={_t("timeline|edits|tooltip_title", { date: dateString })}
+                caption={_t("timeline|edits|tooltip_sub")}
             >
                 <span>{`(${_t("common|edited")})`}</span>
-            </AccessibleTooltipButton>
+            </AccessibleButton>
         );
     }
 
diff --git a/src/components/views/rooms/CollapsibleButton.tsx b/src/components/views/rooms/CollapsibleButton.tsx
index c2c658de103..157e7f7a1a9 100644
--- a/src/components/views/rooms/CollapsibleButton.tsx
+++ b/src/components/views/rooms/CollapsibleButton.tsx
@@ -18,7 +18,6 @@ import React, { ComponentProps, useContext } from "react";
 import classNames from "classnames";
 
 import AccessibleButton from "../elements/AccessibleButton";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { OverflowMenuContext } from "./MessageComposerButtons";
 import { IconizedContextMenuOption } from "../context_menus/IconizedContextMenu";
 import { Ref } from "../../../accessibility/roving/types";
@@ -43,13 +42,8 @@ export const CollapsibleButton: React.FC<Props> = ({
     }
 
     return (
-        <AccessibleTooltipButton
-            {...props}
-            title={title}
-            className={classNames(className, iconClassName)}
-            ref={inputRef}
-        >
+        <AccessibleButton {...props} title={title} className={classNames(className, iconClassName)} ref={inputRef}>
             {children}
-        </AccessibleTooltipButton>
+        </AccessibleButton>
     );
 };
diff --git a/src/components/views/rooms/EmojiButton.tsx b/src/components/views/rooms/EmojiButton.tsx
index 6139043a16c..6ece4172334 100644
--- a/src/components/views/rooms/EmojiButton.tsx
+++ b/src/components/views/rooms/EmojiButton.tsx
@@ -61,6 +61,7 @@ export function EmojiButton({ addEmoji, menuPosition, className }: IEmojiButtonP
                 iconClassName="mx_EmojiButton_icon"
                 onClick={openMenu}
                 title={_t("common|emoji")}
+                aria-label={_t("common|emoji")}
                 inputRef={button}
             />
 
diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx
index cfb579b11cb..3fc0873f5cb 100644
--- a/src/components/views/rooms/EntityTile.tsx
+++ b/src/components/views/rooms/EntityTile.tsx
@@ -178,6 +178,7 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
                 <AccessibleButton
                     className={classNames(mainClassNames)}
                     title={this.props.title}
+                    aria-label={this.props.title}
                     onClick={this.props.onClick}
                 >
                     <div className="mx_EntityTile_avatar">
diff --git a/src/components/views/rooms/LegacyRoomHeader.tsx b/src/components/views/rooms/LegacyRoomHeader.tsx
index 5fab692046d..85dca5f87d9 100644
--- a/src/components/views/rooms/LegacyRoomHeader.tsx
+++ b/src/components/views/rooms/LegacyRoomHeader.tsx
@@ -32,7 +32,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import RoomHeaderButtons from "../right_panel/LegacyRoomHeaderButtons";
 import E2EIcon from "./E2EIcon";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
+import { ButtonEvent } from "../elements/AccessibleButton";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import RoomTopic from "../elements/RoomTopic";
 import RoomName from "../elements/RoomName";
@@ -658,7 +658,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
         if (this.props.viewingCall && !isVideoRoom) {
             if (this.props.activeCall === null) {
                 endButtons.push(
-                    <AccessibleButton
+                    <AccessibleTooltipButton
                         className="mx_LegacyRoomHeader_button mx_LegacyRoomHeader_closeButton"
                         onClick={this.onHideCallClick}
                         title={_t("room|header|close_call_button")}
diff --git a/src/components/views/rooms/MessageComposerButtons.tsx b/src/components/views/rooms/MessageComposerButtons.tsx
index 7f23efbce2b..f5863ac693b 100644
--- a/src/components/views/rooms/MessageComposerButtons.tsx
+++ b/src/components/views/rooms/MessageComposerButtons.tsx
@@ -246,6 +246,7 @@ const UploadButton: React.FC = () => {
             iconClassName="mx_MessageComposer_upload"
             onClick={onClick}
             title={_t("common|attachment")}
+            aria-label={_t("common|attachment")}
         />
     );
 };
diff --git a/src/components/views/rooms/PinnedEventTile.tsx b/src/components/views/rooms/PinnedEventTile.tsx
index 1395dcc2c5a..581583d1d5a 100644
--- a/src/components/views/rooms/PinnedEventTile.tsx
+++ b/src/components/views/rooms/PinnedEventTile.tsx
@@ -27,7 +27,6 @@ import { _t } from "../../../languageHandler";
 import { formatDate } from "../../../DateUtils";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { getUserNameColorClass } from "../../../utils/FormattingUtils";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 
@@ -76,7 +75,7 @@ export default class PinnedEventTile extends React.Component<IProps> {
         let unpinButton: JSX.Element | undefined;
         if (this.props.onUnpinClicked) {
             unpinButton = (
-                <AccessibleTooltipButton
+                <AccessibleButton
                     onClick={this.props.onUnpinClicked}
                     className="mx_PinnedEventTile_unpinButton"
                     title={_t("action|unpin")}
diff --git a/src/components/views/rooms/RoomKnocksBar.tsx b/src/components/views/rooms/RoomKnocksBar.tsx
index 9feb23a1477..f702316222a 100644
--- a/src/components/views/rooms/RoomKnocksBar.tsx
+++ b/src/components/views/rooms/RoomKnocksBar.tsx
@@ -99,6 +99,7 @@ export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => {
                     kind="icon_primary_outline"
                     onClick={() => handleDeny(knockMembers[0].userId)}
                     title={_t("action|deny")}
+                    aria-label={_t("action|deny")}
                 >
                     <XIcon width={18} height={18} />
                 </AccessibleButton>
@@ -108,6 +109,7 @@ export const RoomKnocksBar: VFC<{ room: Room }> = ({ room }) => {
                     kind="icon_primary"
                     onClick={() => handleApprove(knockMembers[0].userId)}
                     title={_t("action|approve")}
+                    aria-label={_t("action|approve")}
                 >
                     <CheckIcon width={18} height={18} />
                 </AccessibleButton>
diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx
index 073950e30f4..426cbc80867 100644
--- a/src/components/views/rooms/RoomList.tsx
+++ b/src/components/views/rooms/RoomList.tsx
@@ -57,10 +57,10 @@ import IconizedContextMenu, {
     IconizedContextMenuOption,
     IconizedContextMenuOptionList,
 } from "../context_menus/IconizedContextMenu";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import ExtraTile from "./ExtraTile";
 import RoomSublist, { IAuxButtonProps } from "./RoomSublist";
 import { SdkContextClass } from "../../../contexts/SDKContext";
+import AccessibleButton from "../elements/AccessibleButton";
 
 interface IProps {
     onKeyDown: (ev: React.KeyboardEvent, state: IRovingTabIndexState) => void;
@@ -185,7 +185,7 @@ const DmAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex, dispatcher = default
         );
     } else if (!activeSpace && showCreateRooms) {
         return (
-            <AccessibleTooltipButton
+            <AccessibleButton
                 tabIndex={tabIndex}
                 onClick={(e) => {
                     dispatcher.dispatch({ action: "view_create_chat" });
diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 70cabb474c9..1001def3869 100644
--- a/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -19,7 +19,6 @@ import { Room, IEventRelation, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import { Optional } from "matrix-events-sdk";
 
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { _t } from "../../../languageHandler";
 import { RecordingState } from "../../../audio/VoiceRecording";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -44,6 +43,7 @@ import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import RoomContext from "../../../contexts/RoomContext";
 import { IUpload, VoiceMessageRecording } from "../../../audio/VoiceMessageRecording";
 import { createVoiceMessageContent } from "../../../utils/createVoiceMessageContent";
+import AccessibleButton from "../elements/AccessibleButton";
 
 interface IProps {
     room: Room;
@@ -271,7 +271,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             }
 
             stopBtn = (
-                <AccessibleTooltipButton
+                <AccessibleButton
                     className="mx_VoiceRecordComposerTile_stop"
                     onClick={this.onRecordStartEndClick}
                     title={tooltip}
@@ -284,7 +284,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
 
         if (this.state.recorder && this.state.recordingPhase !== RecordingState.Uploading) {
             deleteButton = (
-                <AccessibleTooltipButton
+                <AccessibleButton
                     className="mx_VoiceRecordComposerTile_delete"
                     title={_t("action|delete")}
                     onClick={this.onCancel}
diff --git a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx b/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx
index 22c2bc471f1..5fefa4d2d0d 100644
--- a/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/PeopleRoomSettingsTab.tsx
@@ -96,6 +96,7 @@ const Knock: VFC<{
                 kind="icon_primary_outline"
                 onClick={() => handleDeny(roomMember.userId)}
                 title={_t("action|deny")}
+                aria-label={_t("action|deny")}
             >
                 <XIcon width={18} height={18} />
             </AccessibleButton>
@@ -105,6 +106,7 @@ const Knock: VFC<{
                 kind="icon_primary"
                 onClick={() => handleApprove(roomMember.userId)}
                 title={_t("action|approve")}
+                aria-label={_t("action|approve")}
             >
                 <CheckIcon width={18} height={18} />
             </AccessibleButton>
diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx
index 2ded20912d2..a690d3494d8 100644
--- a/src/components/views/spaces/SpaceCreateMenu.tsx
+++ b/src/components/views/spaces/SpaceCreateMenu.tsx
@@ -38,7 +38,6 @@ import {
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../languageHandler";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import ContextMenu, { ChevronFace } from "../../structures/ContextMenu";
 import createRoom, { IOpts as ICreateOpts } from "../../../createRoom";
 import MatrixClientContext, { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
@@ -310,7 +309,7 @@ const SpaceCreateMenu: React.FC<{
     } else {
         body = (
             <React.Fragment>
-                <AccessibleTooltipButton
+                <AccessibleButton
                     className="mx_SpaceCreateMenu_back"
                     onClick={() => setVisibility(null)}
                     title={_t("action|go_back")}
diff --git a/src/components/views/spaces/SpacePanel.tsx b/src/components/views/spaces/SpacePanel.tsx
index 429a18e1344..69bc8bce7c3 100644
--- a/src/components/views/spaces/SpacePanel.tsx
+++ b/src/components/views/spaces/SpacePanel.tsx
@@ -34,7 +34,6 @@ import { _t } from "../../../languageHandler";
 import { useContextMenu } from "../../structures/ContextMenu";
 import SpaceCreateMenu from "./SpaceCreateMenu";
 import { SpaceButton, SpaceItem } from "./SpaceTreeLevel";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { useEventEmitter, useEventEmitterState } from "../../../hooks/useEventEmitter";
 import SpaceStore from "../../../stores/spaces/SpaceStore";
 import {
@@ -72,6 +71,7 @@ import { NotificationState } from "../../../stores/notifications/NotificationSta
 import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../settings/UIFeature";
+import AccessibleButton from "../elements/AccessibleButton";
 import { ThreadsActivityCentre } from "./threads-activity-centre/";
 
 const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
@@ -391,24 +391,17 @@ const SpacePanel: React.FC = () => {
                         aria-label={_t("common|spaces")}
                     >
                         <UserMenu isPanelCollapsed={isPanelCollapsed}>
-                            <AccessibleTooltipButton
+                            <AccessibleButton
                                 className={classNames("mx_SpacePanel_toggleCollapse", { expanded: !isPanelCollapsed })}
                                 onClick={() => setPanelCollapsed(!isPanelCollapsed)}
                                 title={isPanelCollapsed ? _t("action|expand") : _t("action|collapse")}
-                                tooltip={
-                                    <div>
-                                        <div className="mx_Tooltip_title">
-                                            {isPanelCollapsed ? _t("action|expand") : _t("action|collapse")}
-                                        </div>
-                                        <div className="mx_Tooltip_sub">
-                                            {IS_MAC
-                                                ? "⌘ + ⇧ + D"
-                                                : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) +
-                                                  " + " +
-                                                  _t(ALTERNATE_KEY_NAME[Key.SHIFT]) +
-                                                  " + D"}
-                                        </div>
-                                    </div>
+                                caption={
+                                    IS_MAC
+                                        ? "⌘ + ⇧ + D"
+                                        : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) +
+                                          " + " +
+                                          _t(ALTERNATE_KEY_NAME[Key.SHIFT]) +
+                                          " + D"
                                 }
                             />
                         </UserMenu>
diff --git a/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx b/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx
index 33484eb3ced..c60b70c932b 100644
--- a/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx
+++ b/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx
@@ -19,7 +19,7 @@ import React from "react";
 
 import { _t } from "../../../../languageHandler";
 import RoomAvatar from "../../avatars/RoomAvatar";
-import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton";
+import AccessibleButton from "../../elements/AccessibleButton";
 
 interface LegacyCallControlsProps {
     onExpand?: () => void;
@@ -31,21 +31,21 @@ const LegacyCallViewHeaderControls: React.FC<LegacyCallControlsProps> = ({ onExp
     return (
         <div className="mx_LegacyCallViewHeader_controls">
             {onMaximize && (
-                <AccessibleTooltipButton
+                <AccessibleButton
                     className="mx_LegacyCallViewHeader_button mx_LegacyCallViewHeader_button_fullscreen"
                     onClick={onMaximize}
                     title={_t("voip|maximise")}
                 />
             )}
             {onPin && (
-                <AccessibleTooltipButton
+                <AccessibleButton
                     className="mx_LegacyCallViewHeader_button mx_LegacyCallViewHeader_button_pin"
                     onClick={onPin}
                     title={_t("action|pin")}
                 />
             )}
             {onExpand && (
-                <AccessibleTooltipButton
+                <AccessibleButton
                     className="mx_LegacyCallViewHeader_button mx_LegacyCallViewHeader_button_expand"
                     onClick={onExpand}
                     title={_t("voip|expand")}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 0f353c820a2..957227e99d3 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -3220,7 +3220,6 @@
         "download_action_decrypting": "Decrypting",
         "download_action_downloading": "Downloading",
         "edits": {
-            "tooltip_label": "Edited at %(date)s. Click to view edits.",
             "tooltip_sub": "Click to view edits",
             "tooltip_title": "Edited at %(date)s"
         },
diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
index 1fe579bfbe3..34a2a81a206 100644
--- a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
+++ b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
@@ -29,7 +29,6 @@ import Spinner from "../../../components/views/elements/Spinner";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../../../dispatcher/actions";
 import dis from "../../../dispatcher/dispatcher";
-import AccessibleTooltipButton from "../../../components/views/elements/AccessibleTooltipButton";
 
 interface VoiceBroadcastHeaderProps {
     linkToRoom?: boolean;
@@ -95,14 +94,14 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
     });
 
     const microphoneLine = microphoneLabel && (
-        <AccessibleTooltipButton
+        <AccessibleButton
             className={microphoneLineClasses}
             onClick={onMicrophoneLineClick}
             title={_t("voip|change_input_device")}
         >
             <MicrophoneIcon className="mx_Icon mx_Icon_16" />
             <span>{microphoneLabel}</span>
-        </AccessibleTooltipButton>
+        </AccessibleButton>
     );
 
     const onRoomAvatarOrNameClick = (): void => {
diff --git a/test/components/structures/LeftPanel-test.tsx b/test/components/structures/LeftPanel-test.tsx
index 1c990aa2310..4932ba480ce 100644
--- a/test/components/structures/LeftPanel-test.tsx
+++ b/test/components/structures/LeftPanel-test.tsx
@@ -16,8 +16,8 @@ limitations under the License.
 */
 
 import React from "react";
-import { render, RenderResult, screen } from "@testing-library/react";
 import { mocked } from "jest-mock";
+import { render, RenderResult, screen } from "@testing-library/react";
 
 import LeftPanel from "../../../src/components/structures/LeftPanel";
 import PageType from "../../../src/PageTypes";
diff --git a/test/components/structures/PipContainer-test.tsx b/test/components/structures/PipContainer-test.tsx
index bac22091f84..3240bb26fa5 100644
--- a/test/components/structures/PipContainer-test.tsx
+++ b/test/components/structures/PipContainer-test.tsx
@@ -16,11 +16,11 @@ limitations under the License.
 
 import React from "react";
 import { mocked, Mocked } from "jest-mock";
-import { screen, render, act, cleanup } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MatrixClient, PendingEventOrdering, Room, MatrixEvent, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { Widget, ClientWidgetApi } from "matrix-widget-api";
 import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
+import { screen, render, act, cleanup } from "@testing-library/react";
 
 import type { RoomMember } from "matrix-js-sdk/src/matrix";
 import {
diff --git a/test/components/structures/ThreadView-test.tsx b/test/components/structures/ThreadView-test.tsx
index 83eed5eb9d3..1a7a3147d8a 100644
--- a/test/components/structures/ThreadView-test.tsx
+++ b/test/components/structures/ThreadView-test.tsx
@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { act, getByTestId, render, RenderResult, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { mocked } from "jest-mock";
 import {
@@ -28,6 +27,7 @@ import {
     THREAD_RELATION_TYPE,
 } from "matrix-js-sdk/src/matrix";
 import React, { useState } from "react";
+import { act, getByTestId, render, RenderResult, waitFor } from "@testing-library/react";
 
 import ThreadView from "../../../src/components/structures/ThreadView";
 import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
diff --git a/test/components/structures/UserMenu-test.tsx b/test/components/structures/UserMenu-test.tsx
index 22addc5a359..d08b31d0f4c 100644
--- a/test/components/structures/UserMenu-test.tsx
+++ b/test/components/structures/UserMenu-test.tsx
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React from "react";
-import { act, render, RenderResult, screen, waitFor } from "@testing-library/react";
 import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
+import { act, render, RenderResult, screen, waitFor } from "@testing-library/react";
 
 import UnwrappedUserMenu from "../../../src/components/structures/UserMenu";
 import { stubClient, wrapInSdkContext } from "../../test-utils";
diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
index 80d6ac7c747..8968bae579a 100644
--- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -464,14 +464,18 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
               <div
                 aria-label="Emoji"
                 class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
+                data-state="closed"
                 role="button"
                 tabindex="0"
+                title="Emoji"
               />
               <div
                 aria-label="Attachment"
                 class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
+                data-state="closed"
                 role="button"
                 tabindex="0"
+                title="Attachment"
               />
               <div
                 aria-label="More options"
@@ -711,14 +715,18 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
               <div
                 aria-label="Emoji"
                 class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
+                data-state="closed"
                 role="button"
                 tabindex="0"
+                title="Emoji"
               />
               <div
                 aria-label="Attachment"
                 class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
+                data-state="closed"
                 role="button"
                 tabindex="0"
+                title="Attachment"
               />
               <div
                 aria-label="More options"
diff --git a/test/components/structures/__snapshots__/UserMenu-test.tsx.snap b/test/components/structures/__snapshots__/UserMenu-test.tsx.snap
index a43b7180203..ac2070f2967 100644
--- a/test/components/structures/__snapshots__/UserMenu-test.tsx.snap
+++ b/test/components/structures/__snapshots__/UserMenu-test.tsx.snap
@@ -10,6 +10,7 @@ exports[`<UserMenu> <UserMenu> when video broadcast when rendered should render
       aria-haspopup="true"
       aria-label="User menu"
       class="mx_AccessibleButton mx_UserMenu_contextMenuButton"
+      data-state="closed"
       role="button"
       tabindex="0"
       title="User menu"
diff --git a/test/components/structures/auth/Login-test.tsx b/test/components/structures/auth/Login-test.tsx
index 93a02f31db0..8655ecfceb7 100644
--- a/test/components/structures/auth/Login-test.tsx
+++ b/test/components/structures/auth/Login-test.tsx
@@ -15,13 +15,13 @@ limitations under the License.
 */
 
 import React from "react";
-import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/react";
 import { mocked, MockedObject } from "jest-mock";
 import fetchMock from "fetch-mock-jest";
 import { DELEGATED_OIDC_COMPATIBILITY, IdentityProviderBrand, OidcClientConfig } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import * as Matrix from "matrix-js-sdk/src/matrix";
 import { OidcError } from "matrix-js-sdk/src/oidc/error";
+import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/react";
 
 import SdkConfig from "../../../../src/SdkConfig";
 import { mkServerConfig, mockPlatformPeg, unmockPlatformPeg } from "../../../test-utils";
diff --git a/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx b/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx
index 5cd3fad032b..d3a5927afde 100644
--- a/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx
+++ b/test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx
@@ -16,8 +16,8 @@ limitations under the License.
 
 import React from "react";
 import { mocked } from "jest-mock";
-import { act, fireEvent, render } from "@testing-library/react";
 import { Beacon, BeaconIdentifier } from "matrix-js-sdk/src/matrix";
+import { act, fireEvent, render } from "@testing-library/react";
 
 import LeftPanelLiveShareWarning from "../../../../src/components/views/beacon/LeftPanelLiveShareWarning";
 import { OwnBeaconStore, OwnBeaconStoreEvent } from "../../../../src/stores/OwnBeaconStore";
diff --git a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
index 869e17d5e6d..c8e8a7c05c6 100644
--- a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
+++ b/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
@@ -15,6 +15,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
       </h4>
       <div
         class="mx_AccessibleButton mx_DialogSidebar_closeButton"
+        data-state="closed"
         data-testid="dialog-sidebar-close"
         role="button"
         tabindex="0"
@@ -114,6 +115,7 @@ exports[`<DialogSidebar /> renders sidebar correctly without beacons 1`] = `
       </h4>
       <div
         class="mx_AccessibleButton mx_DialogSidebar_closeButton"
+        data-state="closed"
         data-testid="dialog-sidebar-close"
         role="button"
         tabindex="0"
diff --git a/test/components/views/beacon/__snapshots__/LeftPanelLiveShareWarning-test.tsx.snap b/test/components/views/beacon/__snapshots__/LeftPanelLiveShareWarning-test.tsx.snap
index b481b1f8fd3..6f005b1c8d2 100644
--- a/test/components/views/beacon/__snapshots__/LeftPanelLiveShareWarning-test.tsx.snap
+++ b/test/components/views/beacon/__snapshots__/LeftPanelLiveShareWarning-test.tsx.snap
@@ -4,6 +4,7 @@ exports[`<LeftPanelLiveShareWarning /> when user has live location monitor rende
 <DocumentFragment>
   <div
     class="mx_AccessibleButton mx_LeftPanelLiveShareWarning mx_LeftPanelLiveShareWarning__minimized"
+    data-state="closed"
     role="button"
     tabindex="0"
     title="You are sharing your live location"
diff --git a/test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap b/test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap
index 348f951b81a..74e7905c971 100644
--- a/test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap
+++ b/test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap
@@ -110,6 +110,7 @@ exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is
     </button>
     <button
       class="mx_AccessibleButton mx_RoomLiveShareWarning_closeButton"
+      data-state="closed"
       data-testid="room-live-share-wire-error-close-button"
       role="button"
       tabindex="0"
diff --git a/test/components/views/elements/AppTile-test.tsx b/test/components/views/elements/AppTile-test.tsx
index f15f0ce560f..b8437d4d193 100644
--- a/test/components/views/elements/AppTile-test.tsx
+++ b/test/components/views/elements/AppTile-test.tsx
@@ -19,7 +19,6 @@ import { jest } from "@jest/globals";
 import { Room, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { ClientWidgetApi, IWidget, MatrixWidgetType } from "matrix-widget-api";
 import { Optional } from "matrix-events-sdk";
-import { act, render, RenderResult } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { SpiedFunction } from "jest-mock";
 import {
@@ -27,6 +26,7 @@ import {
     WidgetInfo,
     WidgetLifecycle,
 } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
+import { act, render, RenderResult } from "@testing-library/react";
 
 import RightPanel from "../../../../src/components/structures/RightPanel";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
@@ -377,12 +377,12 @@ describe("AppTile", () => {
         });
 
         it("clicking 'minimise' should send the widget to the right", async () => {
-            await userEvent.click(renderResult.getByTitle("Minimise"));
+            await userEvent.click(renderResult.getByLabelText("Minimise"));
             expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Right);
         });
 
         it("clicking 'maximise' should send the widget to the center", async () => {
-            await userEvent.click(renderResult.getByTitle("Maximise"));
+            await userEvent.click(renderResult.getByLabelText("Maximise"));
             expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Center);
         });
 
@@ -435,7 +435,7 @@ describe("AppTile", () => {
             });
 
             it("clicking 'un-maximise' should send the widget to the top", async () => {
-                await userEvent.click(renderResult.getByTitle("Un-maximise"));
+                await userEvent.click(renderResult.getByLabelText("Un-maximise"));
                 expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Top);
             });
         });
@@ -461,7 +461,7 @@ describe("AppTile", () => {
             });
 
             it("should display the »Popout widget« button", () => {
-                expect(renderResult.getByTitle("Popout widget")).toBeInTheDocument();
+                expect(renderResult.getByLabelText("Popout widget")).toBeInTheDocument();
             });
         });
     });
diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
index 92b89013e10..980f00a86bc 100644
--- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
@@ -14,6 +14,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
       >
         <div
           class="mx_AccessibleButton mx_BaseCard_close"
+          data-state="closed"
           data-testid="base-card-close-button"
           role="button"
           tabindex="0"
@@ -35,6 +36,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
               aria-haspopup="true"
               aria-label="Options"
               class="mx_AccessibleButton mx_BaseCard_header_title_button--option"
+              data-state="closed"
               role="button"
               tabindex="0"
               title="Options"
@@ -136,20 +138,20 @@ exports[`AppTile for a pinned widget should render 1`] = `
         class="mx_AppTileMenuBar_widgets"
       >
         <div
+          aria-label="Un-maximise"
           class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
           role="button"
           tabindex="0"
-          title="Un-maximise"
         >
           <div
             class="mx_Icon mx_Icon_12"
           />
         </div>
         <div
+          aria-label="Minimise"
           class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
           role="button"
           tabindex="0"
-          title="Minimise"
         >
           <div
             class="mx_Icon mx_Icon_12"
@@ -160,6 +162,7 @@ exports[`AppTile for a pinned widget should render 1`] = `
           aria-haspopup="true"
           aria-label="Options"
           class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
+          data-state="closed"
           role="button"
           tabindex="0"
           title="Options"
@@ -223,20 +226,20 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
         class="mx_AppTileMenuBar_widgets"
       >
         <div
+          aria-label="Un-maximise"
           class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
           role="button"
           tabindex="0"
-          title="Un-maximise"
         >
           <div
             class="mx_Icon mx_Icon_12"
           />
         </div>
         <div
+          aria-label="Minimise"
           class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
           role="button"
           tabindex="0"
-          title="Minimise"
         >
           <div
             class="mx_Icon mx_Icon_12"
@@ -247,6 +250,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
           aria-haspopup="true"
           aria-label="Options"
           class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
+          data-state="closed"
           role="button"
           tabindex="0"
           title="Options"
@@ -377,20 +381,20 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
               class="mx_AppTileMenuBar_widgets"
             >
               <div
+                aria-label="Maximise"
                 class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
                 role="button"
                 tabindex="0"
-                title="Maximise"
               >
                 <div
                   class="mx_Icon mx_Icon_12"
                 />
               </div>
               <div
+                aria-label="Minimise"
                 class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
                 role="button"
                 tabindex="0"
-                title="Minimise"
               >
                 <div
                   class="mx_Icon mx_Icon_12"
@@ -401,6 +405,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
                 aria-haspopup="true"
                 aria-label="Options"
                 class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
+                data-state="closed"
                 role="button"
                 tabindex="0"
                 title="Options"
diff --git a/test/components/views/location/LocationViewDialog-test.tsx b/test/components/views/location/LocationViewDialog-test.tsx
index e566f0319c0..1fcb690a207 100644
--- a/test/components/views/location/LocationViewDialog-test.tsx
+++ b/test/components/views/location/LocationViewDialog-test.tsx
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import React from "react";
-import { render, RenderResult } from "@testing-library/react";
 import { RoomMember, LocationAssetType } from "matrix-js-sdk/src/matrix";
+import { render, RenderResult } from "@testing-library/react";
 
 import LocationViewDialog from "../../../../src/components/views/location/LocationViewDialog";
 import { TILE_SERVER_WK_KEY } from "../../../../src/utils/WellKnownUtils";
diff --git a/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap b/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
index 62847f2dc47..a1c6075bf3a 100644
--- a/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
+++ b/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
@@ -24,6 +24,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
   >
     <div
       class="mx_AccessibleButton mx_ZoomButtons_button"
+      data-state="closed"
       data-testid="map-zoom-in-button"
       role="button"
       tabindex="0"
@@ -35,6 +36,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
     </div>
     <div
       class="mx_AccessibleButton mx_ZoomButtons_button"
+      data-state="closed"
       data-testid="map-zoom-out-button"
       role="button"
       tabindex="0"
diff --git a/test/components/views/location/__snapshots__/ZoomButtons-test.tsx.snap b/test/components/views/location/__snapshots__/ZoomButtons-test.tsx.snap
index 6b39c3eeaf6..6ae1f8efcf7 100644
--- a/test/components/views/location/__snapshots__/ZoomButtons-test.tsx.snap
+++ b/test/components/views/location/__snapshots__/ZoomButtons-test.tsx.snap
@@ -7,6 +7,7 @@ exports[`<ZoomButtons /> renders buttons 1`] = `
   >
     <div
       class="mx_AccessibleButton mx_ZoomButtons_button"
+      data-state="closed"
       data-testid="map-zoom-in-button"
       role="button"
       tabindex="0"
@@ -18,6 +19,7 @@ exports[`<ZoomButtons /> renders buttons 1`] = `
     </div>
     <div
       class="mx_AccessibleButton mx_ZoomButtons_button"
+      data-state="closed"
       data-testid="map-zoom-out-button"
       role="button"
       tabindex="0"
diff --git a/test/components/views/right_panel/PinnedMessagesCard-test.tsx b/test/components/views/right_panel/PinnedMessagesCard-test.tsx
index aa49c1a55e5..a1e88d3f77c 100644
--- a/test/components/views/right_panel/PinnedMessagesCard-test.tsx
+++ b/test/components/views/right_panel/PinnedMessagesCard-test.tsx
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import React from "react";
-import { render, act, RenderResult, fireEvent, waitForElementToBeRemoved, screen } from "@testing-library/react";
 import { mocked } from "jest-mock";
 import {
     MatrixEvent,
@@ -32,6 +31,7 @@ import {
 import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
 import { PollResponseEvent } from "matrix-js-sdk/src/extensible_events_v1/PollResponseEvent";
 import { PollEndEvent } from "matrix-js-sdk/src/extensible_events_v1/PollEndEvent";
+import { render, act, RenderResult, fireEvent, waitForElementToBeRemoved, screen } from "@testing-library/react";
 
 import { stubClient, mkEvent, mkMessage, flushPromises } from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
diff --git a/test/components/views/right_panel/UserInfo-test.tsx b/test/components/views/right_panel/UserInfo-test.tsx
index e47b07829de..6a735b52534 100644
--- a/test/components/views/right_panel/UserInfo-test.tsx
+++ b/test/components/views/right_panel/UserInfo-test.tsx
@@ -293,7 +293,8 @@ describe("<UserInfo />", () => {
 
         it("renders close button correctly when encryption panel with a pending verification request", () => {
             renderComponent({ phase: RightPanelPhases.EncryptionPanel, verificationRequest });
-            expect(screen.getByTestId("base-card-close-button")).toHaveAttribute("title", "Cancel");
+            screen.getByTestId("base-card-close-button").focus();
+            expect(screen.getByRole("tooltip")).toHaveTextContent("Cancel");
         });
     });
 
@@ -387,11 +388,8 @@ describe("<UserInfo />", () => {
             // click it
             await userEvent.click(devicesButton);
 
-            // there should now be a button with the device id ...
-            const deviceButton = screen.getByRole("button", { description: "d1" });
-
-            // ... which should contain the device name
-            expect(within(deviceButton).getByText("my device")).toBeInTheDocument();
+            // there should now be a button with the device id which should contain the device name
+            expect(screen.getByRole("button", { name: "my device" })).toBeInTheDocument();
         });
 
         it("renders <BasicUserInfo />", async () => {
diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
index 05590b630ce..4a119ef253b 100644
--- a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
+++ b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
@@ -26,6 +26,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </button>
         <div
           class="mx_AccessibleButton mx_BaseCard_close"
+          data-state="closed"
           data-testid="base-card-close-button"
           role="button"
           tabindex="0"
diff --git a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
index 04f43699b36..ebc2af1dcf8 100644
--- a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
+++ b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
@@ -4,6 +4,7 @@ exports[`<DeviceItem /> ambiguous display name 1`] = `
 <div>
   <div
     class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
+    data-state="closed"
     role="button"
     tabindex="0"
     title="deviceId"
@@ -27,6 +28,7 @@ exports[`<DeviceItem /> with display name 1`] = `
 <div>
   <div
     class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
+    data-state="closed"
     role="button"
     tabindex="0"
     title="deviceId"
@@ -50,6 +52,7 @@ exports[`<DeviceItem /> without display name 1`] = `
 <div>
   <div
     class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
+    data-state="closed"
     role="button"
     tabindex="0"
     title="deviceId"
@@ -79,6 +82,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
     >
       <div
         class="mx_AccessibleButton mx_BaseCard_close"
+        data-state="closed"
         data-testid="base-card-close-button"
         role="button"
         tabindex="0"
diff --git a/test/components/views/rooms/MemberList-test.tsx b/test/components/views/rooms/MemberList-test.tsx
index 3b7c5a13bd4..648fa712304 100644
--- a/test/components/views/rooms/MemberList-test.tsx
+++ b/test/components/views/rooms/MemberList-test.tsx
@@ -92,7 +92,7 @@ describe("MemberList", () => {
         let prevMember: RoomMember | undefined;
         for (const tile of memberTiles) {
             const memberA = prevMember;
-            const memberB = memberListRoom.currentState.members[tile.getAttribute("title")!.split(" ")[0]];
+            const memberB = memberListRoom.currentState.members[tile.getAttribute("aria-label")!.split(" ")[0]];
             prevMember = memberB; // just in case an expect fails, set this early
             if (!memberA) {
                 continue;
diff --git a/test/components/views/rooms/RoomKnocksBar-test.tsx b/test/components/views/rooms/RoomKnocksBar-test.tsx
index 22d69863f94..c5db8f276c6 100644
--- a/test/components/views/rooms/RoomKnocksBar-test.tsx
+++ b/test/components/views/rooms/RoomKnocksBar-test.tsx
@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { act, fireEvent, render, screen } from "@testing-library/react";
 import {
     EventTimeline,
     EventType,
@@ -27,6 +26,7 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import React from "react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
 
 import ErrorDialog from "../../../../src/components/views/dialogs/ErrorDialog";
 import { RoomSettingsTab } from "../../../../src/components/views/dialogs/RoomSettingsDialog";
diff --git a/test/components/views/rooms/RoomList-test.tsx b/test/components/views/rooms/RoomList-test.tsx
index d92b25e347c..e1200347b22 100644
--- a/test/components/views/rooms/RoomList-test.tsx
+++ b/test/components/views/rooms/RoomList-test.tsx
@@ -16,10 +16,10 @@ limitations under the License.
 */
 
 import React, { ComponentProps } from "react";
-import { cleanup, queryByRole, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { mocked } from "jest-mock";
 import { Room } from "matrix-js-sdk/src/matrix";
+import { cleanup, queryByRole, render, screen, within } from "@testing-library/react";
 
 import RoomList from "../../../../src/components/views/rooms/RoomList";
 import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
diff --git a/test/components/views/rooms/RoomPreviewCard-test.tsx b/test/components/views/rooms/RoomPreviewCard-test.tsx
index dbec1c72527..24c47f37d5e 100644
--- a/test/components/views/rooms/RoomPreviewCard-test.tsx
+++ b/test/components/views/rooms/RoomPreviewCard-test.tsx
@@ -16,9 +16,9 @@ limitations under the License.
 
 import React from "react";
 import { mocked, Mocked } from "jest-mock";
-import { render, screen, act } from "@testing-library/react";
 import { PendingEventOrdering, Room, RoomStateEvent, RoomType } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { render, screen, act } from "@testing-library/react";
 
 import type { MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix";
 import { stubClient, wrapInMatrixClientContext, mkRoomMember } from "../../../test-utils";
diff --git a/test/components/views/rooms/VoiceRecordComposerTile-test.tsx b/test/components/views/rooms/VoiceRecordComposerTile-test.tsx
index 72456f3c190..c3b7fb1907f 100644
--- a/test/components/views/rooms/VoiceRecordComposerTile-test.tsx
+++ b/test/components/views/rooms/VoiceRecordComposerTile-test.tsx
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React, { createRef, RefObject } from "react";
-import { render } from "@testing-library/react";
 import { MatrixClient, MsgType, Room } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
+import { render } from "@testing-library/react";
 
 import VoiceRecordComposerTile from "../../../../src/components/views/rooms/VoiceRecordComposerTile";
 import { doMaybeLocalRoomAction } from "../../../../src/utils/local-room";
diff --git a/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap
index f40db566bb5..c5a07a0ef37 100644
--- a/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap
@@ -4,7 +4,9 @@ exports[`MemberTile should display an verified E2EIcon when the e2E status = Ver
 <div>
   <div>
     <div
+      aria-label="@userId:matrix.org (power 0)"
       class="mx_AccessibleButton mx_EntityTile mx_EntityTile_offline_neveractive"
+      data-state="closed"
       role="button"
       tabindex="0"
       title="@userId:matrix.org (power 0)"
@@ -57,7 +59,9 @@ exports[`MemberTile should display an warning E2EIcon when the e2E status = Warn
 <div>
   <div>
     <div
+      aria-label="@userId:matrix.org (power 0)"
       class="mx_AccessibleButton mx_EntityTile mx_EntityTile_offline_neveractive"
+      data-state="closed"
       role="button"
       tabindex="0"
       title="@userId:matrix.org (power 0)"
@@ -110,7 +114,9 @@ exports[`MemberTile should not display an E2EIcon when the e2E status = normal 1
 <div>
   <div>
     <div
+      aria-label="@userId:matrix.org (power 0)"
       class="mx_AccessibleButton mx_EntityTile mx_EntityTile_offline_neveractive"
+      data-state="closed"
       role="button"
       tabindex="0"
       title="@userId:matrix.org (power 0)"
diff --git a/test/components/views/settings/devices/LoginWithQRFlow-test.tsx b/test/components/views/settings/devices/LoginWithQRFlow-test.tsx
index 614a8d3ffd4..08a188d6775 100644
--- a/test/components/views/settings/devices/LoginWithQRFlow-test.tsx
+++ b/test/components/views/settings/devices/LoginWithQRFlow-test.tsx
@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import React from "react";
 import { RendezvousFailureReason } from "matrix-js-sdk/src/rendezvous";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 
 import LoginWithQRFlow from "../../../../../src/components/views/auth/LoginWithQRFlow";
 import {
diff --git a/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
index 953e28635e8..2246e941c19 100644
--- a/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
@@ -518,6 +518,7 @@ exports[`<LoginWithQRFlow /> renders QR code 1`] = `
       >
         <div
           class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+          data-state="closed"
           data-testid="back-button"
           role="button"
           tabindex="0"
@@ -650,6 +651,7 @@ exports[`<LoginWithQRFlow /> renders spinner while connecting 1`] = `
       >
         <div
           class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+          data-state="closed"
           data-testid="back-button"
           role="button"
           tabindex="0"
@@ -720,6 +722,7 @@ exports[`<LoginWithQRFlow /> renders spinner while loading 1`] = `
       >
         <div
           class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+          data-state="closed"
           data-testid="back-button"
           role="button"
           tabindex="0"
@@ -778,6 +781,7 @@ exports[`<LoginWithQRFlow /> renders spinner while signing in 1`] = `
       >
         <div
           class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+          data-state="closed"
           data-testid="back-button"
           role="button"
           tabindex="0"
@@ -848,6 +852,7 @@ exports[`<LoginWithQRFlow /> renders spinner while verifying 1`] = `
       >
         <div
           class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+          data-state="closed"
           data-testid="back-button"
           role="button"
           tabindex="0"
@@ -909,6 +914,7 @@ exports[`<LoginWithQRFlow /> renders spinner whilst QR generating 1`] = `
       >
         <div
           class="mx_AccessibleButton mx_LoginWithQR_BackButton"
+          data-state="closed"
           data-testid="back-button"
           role="button"
           tabindex="0"
diff --git a/test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx b/test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx
index c91d0029af8..f5d51977435 100644
--- a/test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx
+++ b/test/components/views/settings/tabs/room/PeopleRoomSettingsTab-test.tsx
@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { act, fireEvent, render, screen, within } from "@testing-library/react";
 import {
     EventTimeline,
     EventType,
@@ -26,6 +25,7 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import React from "react";
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
 
 import ErrorDialog from "../../../../../../src/components/views/dialogs/ErrorDialog";
 import { PeopleRoomSettingsTab } from "../../../../../../src/components/views/settings/tabs/room/PeopleRoomSettingsTab";
diff --git a/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
index 81347ce2a65..08c8793d0b7 100644
--- a/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
@@ -68,7 +68,9 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
         </div>
       </div>
       <div
+        aria-label="Deny"
         class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary_outline"
+        data-state="closed"
         role="button"
         tabindex="0"
         title="Deny"
@@ -79,7 +81,9 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
         />
       </div>
       <div
+        aria-label="Approve"
         class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary"
+        data-state="closed"
         role="button"
         tabindex="0"
         title="Approve"
@@ -135,7 +139,9 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
         </span>
       </div>
       <div
+        aria-label="Deny"
         class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary_outline"
+        data-state="closed"
         role="button"
         tabindex="0"
         title="Deny"
@@ -146,7 +152,9 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
         />
       </div>
       <div
+        aria-label="Approve"
         class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary"
+        data-state="closed"
         role="button"
         tabindex="0"
         title="Approve"
diff --git a/test/components/views/spaces/SpacePanel-test.tsx b/test/components/views/spaces/SpacePanel-test.tsx
index d5a63d5ef52..6b0833932b5 100644
--- a/test/components/views/spaces/SpacePanel-test.tsx
+++ b/test/components/views/spaces/SpacePanel-test.tsx
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 import React from "react";
-import { render, screen, fireEvent, act, cleanup } from "@testing-library/react";
 import { mocked } from "jest-mock";
 import { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
+import { render, screen, fireEvent, act, cleanup } from "@testing-library/react";
 
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { MetaSpace, SpaceKey } from "../../../../src/stores/spaces";
diff --git a/test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap b/test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
index 04c3cbf31fa..6e26e2a460b 100644
--- a/test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
+++ b/test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
@@ -14,6 +14,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
         aria-haspopup="true"
         aria-label="User menu"
         class="mx_AccessibleButton mx_UserMenu_contextMenuButton"
+        data-state="closed"
         role="button"
         tabindex="0"
         title="User menu"
@@ -34,10 +35,11 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
         </div>
       </div>
       <div
-        aria-label="Expand"
         class="mx_AccessibleButton mx_SpacePanel_toggleCollapse"
+        data-state="closed"
         role="button"
         tabindex="0"
+        title="Expand"
       />
     </div>
     <ul
diff --git a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap
index c378b9737d4..ee54a0d452e 100644
--- a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap
+++ b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap
@@ -24,10 +24,11 @@ exports[`VoiceBroadcastHeader when rendering a buffering live broadcast header w
         </div>
       </div>
       <div
-        aria-label="Change input device"
         class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+        data-state="closed"
         role="button"
         tabindex="0"
+        title="Change input device"
       >
         <div
           class="mx_Icon mx_Icon_16"
@@ -81,10 +82,11 @@ exports[`VoiceBroadcastHeader when rendering a live (grey) broadcast header with
         </div>
       </div>
       <div
-        aria-label="Change input device"
         class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+        data-state="closed"
         role="button"
         tabindex="0"
+        title="Change input device"
       >
         <div
           class="mx_Icon mx_Icon_16"
@@ -138,10 +140,11 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
         </div>
       </div>
       <div
-        aria-label="Change input device"
         class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+        data-state="closed"
         role="button"
         tabindex="0"
+        title="Change input device"
       >
         <div
           class="mx_Icon mx_Icon_16"
@@ -211,10 +214,11 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
         </div>
       </div>
       <div
-        aria-label="Change input device"
         class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+        data-state="closed"
         role="button"
         tabindex="0"
+        title="Change input device"
       >
         <div
           class="mx_Icon mx_Icon_16"
diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx
index adc3a558241..8f7bcefcbd4 100644
--- a/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx
+++ b/test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx
@@ -16,9 +16,9 @@ limitations under the License.
 
 import React from "react";
 import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { act, render, RenderResult, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { mocked } from "jest-mock";
+import { act, render, RenderResult, screen } from "@testing-library/react";
 
 import {
     VoiceBroadcastInfoState,
diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx
index a15efc86bc6..5190be07e4c 100644
--- a/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx
+++ b/test/voice-broadcast/components/molecules/VoiceBroadcastPreRecordingPip-test.tsx
@@ -17,8 +17,8 @@ limitations under the License.
 import React from "react";
 import { mocked } from "jest-mock";
 import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix";
-import { act, render, RenderResult, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { act, render, RenderResult, screen } from "@testing-library/react";
 
 import {
     VoiceBroadcastPlaybacksStore,
diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx
index 7d3fd700f57..4806a01e718 100644
--- a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx
+++ b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import React from "react";
-import { render, RenderResult } from "@testing-library/react";
 import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { render, RenderResult } from "@testing-library/react";
 
 import {
     VoiceBroadcastInfoEventType,
diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx
index 5c2371e1a0e..20f1698226a 100644
--- a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx
+++ b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx
@@ -16,11 +16,11 @@ limitations under the License.
 //
 
 import React from "react";
-import { act, render, RenderResult, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { ClientEvent, MatrixClient, MatrixEvent, SyncState } from "matrix-js-sdk/src/matrix";
 import { sleep } from "matrix-js-sdk/src/utils";
 import { mocked } from "jest-mock";
+import { act, render, RenderResult, screen } from "@testing-library/react";
 
 import {
     VoiceBroadcastInfoState,
diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx
index bb374ea73ab..cf913fbe151 100644
--- a/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx
+++ b/test/voice-broadcast/components/molecules/VoiceBroadcastSmallPlaybackBody-test.tsx
@@ -16,9 +16,9 @@ limitations under the License.
 
 import React from "react";
 import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { render, RenderResult } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { mocked } from "jest-mock";
+import { render, RenderResult } from "@testing-library/react";
 
 import {
     VoiceBroadcastInfoState,
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
index 722f44886bd..4eb35952682 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
@@ -27,10 +27,11 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
           </div>
         </div>
         <div
-          aria-label="Change input device"
           class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          data-state="closed"
           role="button"
           tabindex="0"
+          title="Change input device"
         >
           <div
             class="mx_Icon mx_Icon_16"
@@ -157,10 +158,11 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh
           </div>
         </div>
         <div
-          aria-label="Change input device"
           class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          data-state="closed"
           role="button"
           tabindex="0"
+          title="Change input device"
         >
           <div
             class="mx_Icon mx_Icon_16"
@@ -283,10 +285,11 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
           </div>
         </div>
         <div
-          aria-label="Change input device"
           class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          data-state="closed"
           role="button"
           tabindex="0"
+          title="Change input device"
         >
           <div
             class="mx_Icon mx_Icon_16"
@@ -397,10 +400,11 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
           </div>
         </div>
         <div
-          aria-label="Change input device"
           class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          data-state="closed"
           role="button"
           tabindex="0"
+          title="Change input device"
         >
           <div
             class="mx_Icon mx_Icon_16"
@@ -511,10 +515,11 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou
           </div>
         </div>
         <div
-          aria-label="Change input device"
           class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          data-state="closed"
           role="button"
           tabindex="0"
+          title="Change input device"
         >
           <div
             class="mx_Icon mx_Icon_16"
@@ -633,10 +638,11 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
           </div>
         </div>
         <div
-          aria-label="Change input device"
           class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          data-state="closed"
           role="button"
           tabindex="0"
+          title="Change input device"
         >
           <div
             class="mx_Icon mx_Icon_16"
@@ -727,10 +733,11 @@ exports[`VoiceBroadcastPlaybackBody when rendering an error broadcast should ren
           </div>
         </div>
         <div
-          aria-label="Change input device"
           class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          data-state="closed"
           role="button"
           tabindex="0"
+          title="Change input device"
         >
           <div
             class="mx_Icon mx_Icon_16"
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap
index c630405fba7..8806ac2c318 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap
@@ -39,10 +39,11 @@ exports[`VoiceBroadcastPreRecordingPip when rendered should match the snapshot 1
           </div>
         </div>
         <div
-          aria-label="Change input device"
           class="mx_AccessibleButton mx_VoiceBroadcastHeader_line mx_VoiceBroadcastHeader_mic--clickable"
+          data-state="closed"
           role="button"
           tabindex="0"
+          title="Change input device"
         >
           <div
             class="mx_Icon mx_Icon_16"
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
index 799af889bc9..2a3b227150b 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
@@ -27,10 +27,11 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
           </div>
         </div>
         <div
-          aria-label="Change input device"
           class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          data-state="closed"
           role="button"
           tabindex="0"
+          title="Change input device"
         >
           <div
             class="mx_Icon mx_Icon_16"
@@ -80,10 +81,11 @@ exports[`VoiceBroadcastRecordingBody when rendering a paused broadcast should re
           </div>
         </div>
         <div
-          aria-label="Change input device"
           class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          data-state="closed"
           role="button"
           tabindex="0"
+          title="Change input device"
         >
           <div
             class="mx_Icon mx_Icon_16"
diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap
index 3daf466827f..f3f720d6e3b 100644
--- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap
+++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastSmallPlaybackBody-test.tsx.snap
@@ -39,10 +39,11 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'pause',
           </div>
         </div>
         <div
-          aria-label="Change input device"
           class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          data-state="closed"
           role="button"
           tabindex="0"
+          title="Change input device"
         >
           <div
             class="mx_Icon mx_Icon_16"
@@ -115,10 +116,11 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 'playing'
           </div>
         </div>
         <div
-          aria-label="Change input device"
           class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          data-state="closed"
           role="button"
           tabindex="0"
+          title="Change input device"
         >
           <div
             class="mx_Icon mx_Icon_16"
@@ -210,10 +212,11 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a buffering broadcas
           </div>
         </div>
         <div
-          aria-label="Change input device"
           class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          data-state="closed"
           role="button"
           tabindex="0"
+          title="Change input device"
         >
           <div
             class="mx_Icon mx_Icon_16"
@@ -294,10 +297,11 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a playing broadcast
           </div>
         </div>
         <div
-          aria-label="Change input device"
           class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          data-state="closed"
           role="button"
           tabindex="0"
+          title="Change input device"
         >
           <div
             class="mx_Icon mx_Icon_16"
@@ -370,10 +374,11 @@ exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a stopped broadcast
           </div>
         </div>
         <div
-          aria-label="Change input device"
           class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          data-state="closed"
           role="button"
           tabindex="0"
+          title="Change input device"
         >
           <div
             class="mx_Icon mx_Icon_16"