imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use aria descriptions instead of labels for TextWithTooltip (#10952)

Browse source 
* Use aria descriptions instead of labels for TextWithTooltip

to prevent clobbering the reading of the content

* Update snapshot

* Fix snapshots

* Iterate

* Update snapshots

* delint
This commit is contained in:
Michael Telatynski 2023-05-25 09:42:09 +01:00 • committed by GitHub
parent f4a265b2c7
commit f52fab39fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 78 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/views/elements/TextWithTooltip.tsx
View file

@ -35,10 +35,6 @@ export default class TextWithTooltip extends React.Component<IProps> {
public render(): React.ReactNode {
const { class: className, children, tooltip, tooltipClass, tooltipProps, ...props } = this.props;
if (typeof tooltip === "string") {
props["aria-label"] = tooltip;
}
return (
<TooltipTarget
onClick={this.props.onClick}

13
src/components/views/elements/TooltipTarget.tsx
View file

@ -14,13 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { forwardRef, HTMLAttributes } from "react";
import React, { forwardRef, HTMLAttributes, useRef } from "react";
import { randomString } from "matrix-js-sdk/src/randomstring";
import useFocus from "../../../hooks/useFocus";
import useHover from "../../../hooks/useHover";
import Tooltip, { ITooltipProps } from "./Tooltip";
interface IProps extends HTMLAttributes<HTMLSpanElement>, Omit<ITooltipProps, "visible"> {
interface IProps
extends HTMLAttributes<HTMLSpanElement>,
Omit<ITooltipProps, "visible" | "tabIndex" | "aria-describedby"> {
tooltipTargetClassName?: string;
ignoreHover?: (ev: React.MouseEvent) => boolean;
}
@ -46,6 +49,12 @@ const TooltipTarget = forwardRef<HTMLDivElement, IProps>(
},
ref,
) => {
const idRef = useRef("mx_TooltipTarget_" + randomString(8));
// Use generated ID if one is not passed
if (id === undefined) {
id = idRef.current;
}
const [isFocused, focusProps] = useFocus();
const [isHovering, hoverProps] = useHover(ignoreHover || (() => false));