fix(accessibility) make tooltip component keyboard accessible

Author: mihhu

react/features/base/toolbox/components/ToolboxItem.web.tsx

@@ -114,7 +114,7 @@ export default class ToolboxItem extends AbstractToolboxItem<IProps> {
                     text = { this.label } />
             );
         }
-        let children = (
+        const children = (
             <Fragment>
                 { this._renderIcon() }
                 { showLabel && <span>
@@ -125,13 +125,15 @@ export default class ToolboxItem extends AbstractToolboxItem<IProps> {
         );
 
         if (useTooltip) {
-            children = (
+            const tooltip = (
                 <Tooltip
                     content = { this.tooltip ?? '' }
                     position = { tooltipPosition }>
-                    { children }
+                    { React.createElement(elementType, props, children) }
                 </Tooltip>
             );
+
+            return tooltip;
         }
 
         return React.createElement(elementType, props, children);

react/features/base/tooltip/components/Tooltip.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
+import React, { ReactElement, cloneElement, useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { keyframes } from 'tss-react';
 import { makeStyles } from 'tss-react/mui';
@@ -58,12 +58,14 @@ const Tooltip = ({ containerClassName, content, children, position = 'top' }: IP
     const dispatch = useDispatch();
     const [ visible, setVisible ] = useState(false);
     const [ isUnmounting, setIsUnmounting ] = useState(false);
+    const [ wasOpenedWithKeyboard, setWasOpenedWithKeyboard ] = useState(false);
     const overflowDrawer = useSelector((state: IReduxState) => state['features/toolbox'].overflowDrawer);
     const { classes, cx } = useStyles();
     const timeoutID = useRef({
         open: 0,
         close: 0
     });
+    const tooltipId = useRef(`tooltip-${Math.random().toString(36).substring(2, 11)}`);
     const {
         content: storeContent,
         previousContent,
@@ -73,7 +75,10 @@ const Tooltip = ({ containerClassName, content, children, position = 'top' }: IP
     const contentComponent = (
         <div
             className = { cx(classes.container, previousContent === '' && 'mounting-animation',
-                isUnmounting && 'unmounting') }>
+                isUnmounting && 'unmounting') }
+            id = { tooltipId.current }
+            role = 'tooltip'
+            tabIndex = { wasOpenedWithKeyboard ? 0 : -1 }>
             {content}
         </div>
     );
@@ -89,31 +94,37 @@ const Tooltip = ({ containerClassName, content, children, position = 'top' }: IP
         setIsUnmounting(false);
     };
 
-    const onPopoverOpen = useCallback(() => {
+    const onPopoverOpen = useCallback((keyboardTriggered = false) => {
         if (isUnmounting) {
             return;
         }
 
+        setWasOpenedWithKeyboard(keyboardTriggered);
         clearTimeout(timeoutID.current.close);
         timeoutID.current.close = 0;
         if (!visible) {
             if (isVisible) {
                 openPopover();
             } else {
+                const delay = keyboardTriggered ? 0 : TOOLTIP_DELAY;
+
                 timeoutID.current.open = window.setTimeout(() => {
                     openPopover();
-                }, TOOLTIP_DELAY);
+                }, delay);
             }
         }
     }, [ visible, isVisible, isUnmounting ]);
 
-    const onPopoverClose = useCallback(() => {
+    const onPopoverClose = useCallback((immediate = false) => {
         clearTimeout(timeoutID.current.open);
         if (visible) {
+            const delay = immediate ? 0 : TOOLTIP_DELAY;
+
             timeoutID.current.close = window.setTimeout(() => {
                 setIsUnmounting(true);
-            }, TOOLTIP_DELAY);
+            }, delay);
         }
+        setWasOpenedWithKeyboard(false);
     }, [ visible ]);
 
     useEffect(() => {
@@ -139,6 +150,44 @@ const Tooltip = ({ containerClassName, content, children, position = 'top' }: IP
         return children;
     }
 
+    const handleFocus = useCallback(() => {
+        onPopoverOpen(true);
+    }, [ onPopoverOpen ]);
+
+    const handleBlur = useCallback(() => {
+        onPopoverClose(true);
+    }, [ onPopoverClose ]);
+
+    const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
+        if (event.key === 'Escape' && visible) {
+            event.preventDefault();
+            onPopoverClose(true);
+        }
+    }, [ visible, onPopoverClose ]);
+
+    const enhancedChildren = cloneElement(children, {
+        'aria-describedby': visible ? tooltipId.current : undefined,
+        tabIndex: children.props.tabIndex !== undefined ? children.props.tabIndex : 0,
+        onFocus: (event: React.FocusEvent) => {
+            handleFocus();
+            if (children.props.onFocus) {
+                children.props.onFocus(event);
+            }
+        },
+        onBlur: (event: React.FocusEvent) => {
+            handleBlur();
+            if (children.props.onBlur) {
+                children.props.onBlur(event);
+            }
+        },
+        onKeyDown: (event: React.KeyboardEvent) => {
+            handleKeyDown(event);
+            if (children.props.onKeyDown) {
+                children.props.onKeyDown(event);
+            }
+        }
+    });
+
     return (
         <Popover
             allowClick = { true }
@@ -148,8 +197,9 @@ const Tooltip = ({ containerClassName, content, children, position = 'top' }: IP
             onPopoverClose = { onPopoverClose }
             onPopoverOpen = { onPopoverOpen }
             position = { position }
+            role = 'tooltip'
             visible = { visible }>
-            {children}
+            {enhancedChildren}
         </Popover>
     );
 };

react/features/file-sharing/components/web/FileSharing.tsx

@@ -7,6 +7,7 @@ import { IReduxState } from '../../../app/types';
 import Avatar from '../../../base/avatar/components/Avatar';
 import Icon from '../../../base/icons/components/Icon';
 import { IconCloudUpload, IconDownload, IconTrash } from '../../../base/icons/svg';
+import Tooltip from '../../../base/tooltip/components/Tooltip';
 import BaseTheme from '../../../base/ui/components/BaseTheme.web';
 import Button from '../../../base/ui/components/web/Button';
 import { BUTTON_TYPES } from '../../../base/ui/constants.web';
@@ -325,9 +326,11 @@ const FileSharing = () => {
                                                         src = { getFileIcon(file.fileType) } />
                                                 </div>
                                                 <div className = { classes.fileItemDetails }>
-                                                    <div className = { classes.fileName }>
-                                                        { file.fileName }
-                                                    </div>
+                                                    <Tooltip content = { file.fileName }>
+                                                        <div className = { classes.fileName }>
+                                                            { file.fileName }
+                                                        </div>
+                                                    </Tooltip>
                                                     <div className = { classes.fileSize }>
                                                         { formatFileSize(file.fileSize) }
                                                     </div>