PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Add extra attribute to AccessibleButton (#12456)

Browse source 
* Update snapshots

* Add extra attribute to `AccessibleButton`
This commit is contained in:
Florian Duros 2024-04-26 11:10:15 +02:00 committed by GitHub
parent bd7ce7cda9
commit 264e202ccd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 32 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/views/elements/AccessibleButton.tsx
View file

@ -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>
);

28
test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
View file

@ -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"