IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

A11y: Make tooltip dismissible in Toolbar and Icon buttons (#54586)

Browse Source
This commit is contained in:
Laura Fernández 2022-09-08 14:32:50 +02:00 committed by GitHub
parent e9243f8a38
commit c684babecc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/grafana-ui/src/components/Tooltip/Tooltip.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React from 'react';
import React, { useEffect } from 'react';
import { usePopperTooltip } from 'react-popper-tooltip';
import { colorManipulator, GrafanaTheme2 } from '@grafana/data';
@ -22,14 +22,33 @@ export interface TooltipProps {
}
export const Tooltip = React.memo(({ children, theme, interactive, show, placement, content }: TooltipProps) => {
const [controlledVisible, setControlledVisible] = React.useState(show);
useEffect(() => {
if (controlledVisible !== false) {
const handleKeyDown = (enterKey: KeyboardEvent) => {
if (enterKey.key === 'Escape') {
setControlledVisible(false);
}
};
document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
} else {
return;
}
}, [controlledVisible]);
const { getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef, visible, update } = usePopperTooltip({
visible: show,
visible: controlledVisible,
placement: placement,
interactive: interactive,
delayHide: interactive ? 100 : 0,
delayShow: 150,
offset: [0, 8],
trigger: ['hover', 'focus'],
onVisibleChange: setControlledVisible,
});
const styles = useStyles2(getStyles);