Add extra attribute to AccessibleButton (#12456)

* Update snapshots * Add extra attribute to `AccessibleButton`
tchapgouv · Apr 26, 2024 · 264e202 · 264e202
1 parent bd7ce7c
commit 264e202
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 18 deletions.
diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx
@@ -14,7 +14,7 @@
  limitations under the License.
  */
 
-import React, { forwardRef, FunctionComponent, HTMLAttributes, InputHTMLAttributes, Ref } from "react";
+import React, { ComponentProps, forwardRef, FunctionComponent, HTMLAttributes, InputHTMLAttributes, Ref } from "react";
 import classnames from "classnames";
 import { Tooltip } from "@vector-im/compound-web";
 
@@ -61,6 +61,8 @@ type DynamicElementProps<T extends keyof JSX.IntrinsicElements> = Partial<
 > &
     Omit<InputHTMLAttributes<Element>, "onClick">;
 
+type TooltipProps = ComponentProps<typeof Tooltip>;
+
 /**
  * Type of props accepted by {@link AccessibleButton}.
  *
@@ -96,6 +98,14 @@ type Props<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> &
      * Only valid when used in conjunction with `title`.
      */
     caption?: string;
+    /**
+     * The placement of the tooltip.
+     */
+    placement?: TooltipProps["placement"];
+    /**
+     * Callback for when the tooltip is opened or closed.
+     */
+    onTooltipOpenChange?: TooltipProps["onOpenChange"];
 };
 
 /**
@@ -128,6 +138,8 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
         triggerOnMouseDown,
         title,
         caption,
+        placement,
+        onTooltipOpenChange,
         ...restProps
     }: Props<T>,
     ref: Ref<HTMLElement>,
@@ -199,7 +211,13 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
 
     if (title) {
         return (
-            <Tooltip label={title} caption={caption} isTriggerInteractive={!disabled}>
+            <Tooltip
+                label={title}
+                caption={caption}
+                isTriggerInteractive={true}
+                placement={placement}
+                onOpenChange={onTooltipOpenChange}
+            >
                 {button}
             </Tooltip>
         );

diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
@@ -135,26 +135,22 @@ exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
       >
         Current session
       </h3>
-      <span
+      <div
+        aria-disabled="true"
+        aria-expanded="false"
+        aria-haspopup="true"
+        aria-label="Options"
+        class="mx_AccessibleButton mx_AccessibleButton_disabled"
         data-state="closed"
+        data-testid="current-session-menu"
+        disabled=""
+        role="button"
         tabindex="0"
       >
         <div
-          aria-disabled="true"
-          aria-expanded="false"
-          aria-haspopup="true"
-          aria-label="Options"
-          class="mx_AccessibleButton mx_AccessibleButton_disabled"
-          data-testid="current-session-menu"
-          disabled=""
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="mx_KebabContextMenu_icon"
-          />
-        </div>
-      </span>
+          class="mx_KebabContextMenu_icon"
+        />
+      </div>
     </div>
     <div
       class="mx_SettingsSubsection_content"