Tooltip: Use AccessibleButton in RovingAccessibleTooltipButton (#12458)

* Use `AccessibleButton` in `RovingAccessibleTooltipButton`

* Update snapshots

* Update @vector-im/compound-web

* Update playwright

* Remove placement

Author: florianduros

package.json

@@ -76,7 +76,7 @@
         "@sentry/browser": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.2.0",
-        "@vector-im/compound-web": "^4.0.2",
+        "@vector-im/compound-web": "^4.1.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png

@@ -16,26 +16,23 @@ limitations under the License.
 
 import React, { ComponentProps } from "react";
 
-import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
 import { useRovingTabIndex } from "../RovingTabIndex";
 import { Ref } from "./types";
+import AccessibleButton from "../../components/views/elements/AccessibleButton";
 
-type Props<T extends keyof JSX.IntrinsicElements> = Omit<
-    ComponentProps<typeof AccessibleTooltipButton<T>>,
-    "tabIndex"
-> & {
+type Props<T extends keyof JSX.IntrinsicElements> = Omit<ComponentProps<typeof AccessibleButton<T>>, "tabIndex"> & {
     inputRef?: Ref;
 };
 
-// Wrapper to allow use of useRovingTabIndex for simple AccessibleTooltipButtons outside of React Functional Components.
+// Wrapper to allow use of useRovingTabIndex for simple AccessibleButtons outside of React Functional Components.
 export const RovingAccessibleTooltipButton = <T extends keyof JSX.IntrinsicElements>({
     inputRef,
     onFocus,
     ...props
 }: Props<T>): JSX.Element => {
     const [onFocusInternal, isActive, ref] = useRovingTabIndex(inputRef);
     return (
-        <AccessibleTooltipButton
+        <AccessibleButton
             {...props}
             onFocus={(event: React.FocusEvent) => {
                 onFocusInternal();

src/accessibility/roving/RovingAccessibleTooltipButton.tsx

@@ -229,22 +229,16 @@ const ReplyInThreadButton: React.FC<IReplyInThreadButton> = ({ mxEvent }) => {
         }
     };
 
+    const title = !hasARelation ? _t("action|reply_in_thread") : _t("threads|error_start_thread_existing_relation");
+
     return (
         <RovingAccessibleTooltipButton
             className="mx_MessageActionBar_iconButton mx_MessageActionBar_threadButton"
             disabled={hasARelation}
-            tooltip={
-                <>
-                    <div className="mx_Tooltip_title">
-                        {!hasARelation
-                            ? _t("action|reply_in_thread")
-                            : _t("threads|error_start_thread_existing_relation")}
-                    </div>
-                </>
-            }
-            title={!hasARelation ? _t("action|reply_in_thread") : _t("threads|error_start_thread_existing_relation")}
+            title={title}
             onClick={onClick}
             onContextMenu={onClick}
+            placement="left"
         >
             <ThreadIcon />
         </RovingAccessibleTooltipButton>
@@ -509,18 +503,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                     mx_MessageActionBar_iconButton: true,
                     mx_MessageActionBar_expandCollapseMessageButton: true,
                 });
-                const tooltip = (
-                    <>
-                        <div className="mx_Tooltip_title">
-                            {this.props.isQuoteExpanded
-                                ? _t("timeline|mab|collapse_reply_chain")
-                                : _t("timeline|mab|expand_reply_chain")}
-                        </div>
-                        <div className="mx_Tooltip_sub">
-                            {_t(ALTERNATE_KEY_NAME[Key.SHIFT]) + " + " + _t("action|click")}
-                        </div>
-                    </>
-                );
+
                 toolbarOpts.push(
                     <RovingAccessibleTooltipButton
                         className={expandClassName}
@@ -529,9 +512,10 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
                                 ? _t("timeline|mab|collapse_reply_chain")
                                 : _t("timeline|mab|expand_reply_chain")
                         }
-                        tooltip={tooltip}
+                        caption={_t(ALTERNATE_KEY_NAME[Key.SHIFT]) + " + " + _t("action|click")}
                         onClick={this.props.toggleThreadExpanded}
                         key="expand"
+                        placement="left"
                     >
                         {this.props.isQuoteExpanded ? <CollapseMessageIcon /> : <ExpandMessageIcon />}
                     </RovingAccessibleTooltipButton>,

src/components/views/messages/MessageActionBar.tsx

@@ -34,7 +34,6 @@ import { WidgetType } from "../../../widgets/WidgetType";
 import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
 import WidgetUtils from "../../../utils/WidgetUtils";
 import { ElementWidgetActions } from "../../../stores/widgets/ElementWidgetActions";
-import { Alignment } from "../elements/Tooltip";
 
 interface Props {
     widgetId: string;
@@ -128,9 +127,9 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
                         <Toolbar className="mx_WidgetPip_footer">
                             <RovingAccessibleTooltipButton
                                 onClick={onLeaveClick}
-                                tooltip={_t("action|leave")}
+                                title={_t("action|leave")}
                                 aria-label={_t("action|leave")}
-                                alignment={Alignment.Top}
+                                placement="top"
                             >
                                 <HangupIcon className="mx_Icon mx_Icon_24" />
                             </RovingAccessibleTooltipButton>

src/components/views/pips/WidgetPip.tsx

@@ -127,16 +127,6 @@ interface IFormatButtonProps {
 class FormatButton extends React.PureComponent<IFormatButtonProps> {
     public render(): React.ReactNode {
         const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`;
-        let shortcut;
-        if (this.props.shortcut) {
-            shortcut = <div className="mx_MessageComposerFormatBar_tooltipShortcut">{this.props.shortcut}</div>;
-        }
-        const tooltip = (
-            <div>
-                <div className="mx_Tooltip_title">{this.props.label}</div>
-                <div className="mx_Tooltip_sub">{shortcut}</div>
-            </div>
-        );
 
         // element="button" and type="button" are necessary for the buttons to work on WebKit,
         // otherwise the text is deselected before onClick can ever be called
@@ -145,8 +135,9 @@ class FormatButton extends React.PureComponent<IFormatButtonProps> {
                 element="button"
                 type="button"
                 onClick={this.props.onClick}
+                aria-label={this.props.label}
                 title={this.props.label}
-                tooltip={tooltip}
+                caption={this.props.shortcut}
                 className={className}
             />
         );

src/components/views/rooms/MessageComposerFormatBar.tsx

@@ -397,41 +397,47 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                   <button
                     aria-label="Bold"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
+                    data-state="closed"
                     role="button"
                     tabindex="0"
                     type="button"
                   />
                   <button
                     aria-label="Italics"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
+                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Strikethrough"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
+                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Code block"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
+                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Quote"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
+                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Insert link"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
+                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
@@ -644,41 +650,47 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                   <button
                     aria-label="Bold"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
+                    data-state="closed"
                     role="button"
                     tabindex="0"
                     type="button"
                   />
                   <button
                     aria-label="Italics"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
+                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Strikethrough"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
+                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Code block"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
+                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Quote"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
+                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Insert link"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
+                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"

test/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -11,6 +11,7 @@ exports[`EventTileThreadToolbar renders 1`] = `
     <div
       aria-label="View in room"
       class="mx_AccessibleButton mx_MessageActionBar_iconButton"
+      data-state="closed"
       role="button"
       tabindex="0"
     >
@@ -19,6 +20,7 @@ exports[`EventTileThreadToolbar renders 1`] = `
     <div
       aria-label="Copy link to thread"
       class="mx_AccessibleButton mx_MessageActionBar_iconButton"
+      data-state="closed"
       role="button"
       tabindex="-1"
     >

test/components/views/rooms/EventTile/__snapshots__/EventTileThreadToolbar-test.tsx.snap

@@ -3060,10 +3060,10 @@
   dependencies:
     svg2vectordrawable "^2.9.1"
 
-"@vector-im/compound-web@^4.0.2":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-4.0.2.tgz#cd89ca076b9b0528718e45110a4c8126e7556c63"
-  integrity sha512-MBqmSbtcWC6KJjuTWPZ6FYc83YrUJ9dOageUdbayjhVGZ/de/a+nl/vPIAX+5ic2QWUN7nn9hujfzQF69mbIeg==
+"@vector-im/compound-web@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-4.1.0.tgz#45fa22e4e91b5fd4c2f535e040072990d5a33712"
+  integrity sha512-FQSJK7PaJ3dR1c1Q3TYVSShJBl9TwlrhKadnTWsPIX6xE+rvCAeujE50QbcEWdDlWeaJ9Hi0bVPlEssJ+eRwtQ==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@floating-ui/react-dom" "^2.0.8"