nikrozman/element-web
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Add Tooltip to AccessibleButton (#12443)

Browse Source 
* Deprecate AccessibleTooltipButton

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Deprecate AccessibleTooltipButton

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix `UserInfo-test.tsx`

* Update `LoginWithQRFlow-test.tsx` snapshot

* Remove tooltip provider from test

* Fix `AccessibleButton`

* Update snapshots

* Revert to original import

* Use title to populate aria-label

* Rollback AccessibleButton or Tooltip changes. Will come in another PR

* Rollback en.json change

* Update snapshots

* Fix `UserInfo`

* Update snapshots

* Use label instead of title in test

* Use label instead of title in TAC test

* Use label instead of title in read-receipt test

* Remove tooltip for ContextMenu

* Add extra information for caption field

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Florian Duros
2024-04-24 14:24:25 +02:00
committed by GitHub
parent 644bf78e2a
commit 700b3955a4
24 changed files with 147 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/views/elements/AccessibleButton.tsx
View File

@@ -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,15 @@ 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 is a secondary text displayed under the `title` of the tooltip.
* Only valid when used in conjunction with `title`.
*/
caption?: string;
};
/**
@@ -116,11 +126,14 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
onKeyDown,
onKeyUp,
triggerOnMouseDown,
title,
caption,
...restProps
}: Props<T>,
ref: Ref<HTMLElement>,
): JSX.Element {
const newProps: RenderedElementProps = restProps;
newProps["aria-label"] = newProps["aria-label"] ?? title;
if (disabled) {
newProps["aria-disabled"] = true;
newProps["disabled"] = true;
@@ -182,7 +195,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