feat(plasma-web): Tooltip a11y & close with esc

Author: fanisco

packages/plasma-web/src/components/Tooltip/Tooltip.stories.mdx

@@ -3,8 +3,10 @@ import styled from 'styled-components';
 import { Story, Meta } from '@storybook/react';
 import { IconDownload } from '@sberdevices/plasma-icons';
 
-import { disableProps } from '../../helpers';
+import { InSpacingDecorator, disableProps } from '../../helpers';
+import { applySpacing, SpacingProps } from '../../mixins';
 import { Button } from '../Button';
+import { TextField } from '../TextField';
 
 import { Tooltip, TooltipProps, Placement } from '.';
 
@@ -30,9 +32,10 @@ const StyledGrid = styled.div`
 
 export default {
     title: 'Controls/Tooltip',
+    decorators: [InSpacingDecorator],
 } as Meta;
 
-export const Live = () => {
+export const All = () => {
     return (
         <StyledGrid>
             <Tooltip placement="top-start" isVisible arrow text="Top start" animated={false}>
@@ -61,29 +64,58 @@ export const Live = () => {
     );
 };
 
-export const Default: Story<TooltipProps> = (args) => {
-    const [isVisible, setVisible] = React.useState(false);
+const StyledRow = styled.div<SpacingProps>`
+    ${applySpacing}
+    display: flex;
+`;
+
+export const Live: Story<TooltipProps> = (args) => {
+    const [isVisibleA, setVisibleA] = React.useState(false);
+    const [isVisibleB, setVisibleB] = React.useState(false);
 
     return (
-        <Tooltip isVisible={isVisible} {...args}>
-            <Button
-                text="Toggle"
-                onClick={() => {
-                    setVisible((isVis) => !isVis);
-                }}
-            />
-        </Tooltip>
+        <>
+            <StyledRow mb="8x">
+                <Tooltip
+                    {...args}
+                    id="example-tooltip-firstname"
+                    text="Введите имя"
+                    isVisible={isVisibleA}
+                    onDismiss={() => setVisibleA(false)}
+                    onFocus={() => setVisibleA(true)}
+                    onMouseOver={() => setVisibleA(true)}
+                    onBlur={() => setVisibleA(false)}
+                    onMouseOut={() => setVisibleA(false)}
+                >
+                    <TextField label="Имя" aria-describedby="example-tooltip-firstname" />
+                </Tooltip>
+            </StyledRow>
+            <StyledRow mb="8x">
+                <Tooltip
+                    {...args}
+                    id="example-tooltip-lastname"
+                    text="Введите фамилию"
+                    isVisible={isVisibleB}
+                    onDismiss={() => setVisibleB(false)}
+                    onFocus={() => setVisibleB(true)}
+                    onMouseOver={() => setVisibleB(true)}
+                    onBlur={() => setVisibleB(false)}
+                    onMouseOut={() => setVisibleB(false)}
+                >
+                    <TextField label="Фамилия" aria-describedby="example-tooltip-lastname" />
+                </Tooltip>
+            </StyledRow>
+        </>
     );
 };
 
-Default.args = {
+Live.args = {
     placement: 'bottom',
     animated: true,
     arrow: true,
-    text: 'Hello there.',
 };
 
-Default.argTypes = {
+Live.argTypes = {
     placement: {
         control: {
             type: 'select',

packages/plasma-web/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import { caption, dark02, shadows, white } from '@sberdevices/plasma-core';
 import { usePopper } from 'react-popper';
@@ -8,6 +8,8 @@ export type BasePlacement = 'top' | 'bottom' | 'right' | 'left';
 export type VariationPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
 export type Placement = BasePlacement | VariationPlacement;
 
+const ESCAPE_KEYCODE = 27;
+
 export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Текст тултипа.
@@ -29,6 +31,10 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
      * Анимированное появление/сокрытие.
      */
     animated?: boolean;
+    /**
+     * Событие закрытия тултипа по кнопке Esc.
+     */
+    onDismiss?: () => void;
 }
 
 const offset = [0, 6];
@@ -74,6 +80,7 @@ const StyledTooltip = styled.span<Pick<TooltipProps, 'isVisible' | 'animated'>>`
     color: ${white};
 
     white-space: pre;
+    pointer-events: none;
 
     transition: opacity 200ms ease-in-out;
 
@@ -114,6 +121,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
     animated = true,
     placement = 'bottom',
     children,
+    onDismiss,
     ...rest
 }) => {
     const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(null);
@@ -127,22 +135,37 @@ export const Tooltip: React.FC<TooltipProps> = ({
         ],
     });
 
+    useEffect(() => {
+        const onKeyDown = (event: KeyboardEvent) => {
+            if (event.keyCode === ESCAPE_KEYCODE) {
+                onDismiss?.();
+            }
+        };
+
+        window.addEventListener('keydown', onKeyDown);
+
+        return () => {
+            window.removeEventListener('keydown', onKeyDown);
+        };
+    }, []);
+
     return (
-        <StyledRoot aria-describedby={id} {...rest}>
+        <StyledRoot {...rest}>
+            {children && <StyledWrapper ref={setWrapperElement}>{children}</StyledWrapper>}
             <StyledTooltip
+                {...attributes.popper}
                 ref={setTooltipElement}
                 id={id}
                 isVisible={isVisible}
                 animated={animated}
                 style={styles.popper}
                 role="tooltip"
-                aria-hidden="true"
-                {...attributes.popper}
+                aria-live="polite"
+                aria-hidden={!isVisible}
             >
                 {arrow && <StyledArrow ref={setArrowElement} style={styles.arrow} {...attributes.arrow} />}
                 {text}
             </StyledTooltip>
-            {children && <StyledWrapper ref={setWrapperElement}>{children}</StyledWrapper>}
         </StyledRoot>
     );
 };