feat: flyout accessibility improvements

- escape key closes flyout menu - focus first item in flyout menu
dhis2 · May 6, 2024 · 0675f99 · 0675f99
1 parent d35ffb2
commit 0675f99
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 16 deletions.
diff --git a/components/menu/src/flyout-menu/flyout-menu.js b/components/menu/src/flyout-menu/flyout-menu.js
@@ -1,6 +1,13 @@
 import { colors, elevations, spacers } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
-import React, { Children, cloneElement, isValidElement, useState } from 'react'
+import React, {
+    Children,
+    cloneElement,
+    isValidElement,
+    useEffect,
+    useRef,
+    useState,
+} from 'react'
 import { Menu } from '../index.js'
 
 const FlyoutMenu = ({
@@ -16,9 +23,27 @@ const FlyoutMenu = ({
         const toggleValue = index === openedSubMenu ? null : index
         setOpenedSubMenu(toggleValue)
     }
+    const ref = useRef(null)
+
+    const handleKeyDown = (event) => {
+        if (event.key === 'Escape' || event.key === 'ArrowLeft') {
+            setOpenedSubMenu(null)
+        }
+    }
+
+    useEffect(() => {
+        if (ref.current) {
+            ref.current?.children[0].focus()
+        }
+    }, [])
 
     return (
-        <div className={className} data-test={dataTest}>
+        <div
+            className={className}
+            data-test={dataTest}
+            onKeyDown={handleKeyDown}
+            ref={ref}
+        >
             <Menu dense={dense}>
                 {Children.map(children, (child, index) =>
                     isValidElement(child)

diff --git a/components/menu/src/menu/menu.js b/components/menu/src/menu/menu.js
@@ -104,20 +104,20 @@ const Menu = ({ children, className, dataTest, dense }) => {
                     break
                 case 'ArrowLeft':
                     event.preventDefault()
-                    document
-                        .querySelector(
-                            `[aria-owns='${event.target.parentNode.parentNode.parentNode.parentNode.getAttribute(
-                                'id'
-                            )}']`
-                        )
-                        .focus()
-                    document
-                        .querySelector(
-                            `[aria-owns='${event.target.parentNode.parentNode.parentNode.parentNode.getAttribute(
-                                'id'
-                            )}']`
-                        )
-                        .click()
+                    // document
+                    //     .querySelector(
+                    //         `[aria-owns='${event.target.parentNode.parentNode.parentNode.parentNode.getAttribute(
+                    //             'id'
+                    //         )}']`
+                    //     )
+                    //     .focus()
+                    // document
+                    //     .querySelector(
+                    //         `[aria-owns='${event.target.parentNode.parentNode.parentNode.parentNode.getAttribute(
+                    //             'id'
+                    //         )}']`
+                    //     )
+                    //     .click()
                     break
                 case ' ':
                 case 'Enter':