Accessible dropdown (#182)

* Accessible dropdown

* Latest rc-menu with Home, End keys support

* Accessibility unit test

* no message

* node-version: '14'

* Roll back node version update for CI. It must be updated in a separate PR.

* Missing tsconfig is causing CI to fail

* Lint fix

* Fix merge issues

* Test fix

* Coverage increase

Co-authored-by: Y Tron Hy <[email protected]>

Author: dartamonov-vertex

package.json

@@ -52,7 +52,7 @@
     "jquery": "^3.3.1",
     "less": "^3.11.1",
     "np": "^6.0.0",
-    "rc-menu": "^8.0.0-alpha.2",
+    "rc-menu": "^9.2.1",
     "rc-util": "^5.2.0",
     "react": "^16.11.0",
     "react-dom": "^16.0.0",

src/Dropdown.tsx

@@ -9,6 +9,7 @@ import type {
   ActionType,
 } from 'rc-trigger/lib/interface';
 import Placements from './placements';
+import useAccessibility from './hooks/useAccessibility';
 
 export interface DropdownProps
   extends Pick<
@@ -66,6 +67,18 @@ function Dropdown(props: DropdownProps, ref) {
   const triggerRef = React.useRef(null);
   React.useImperativeHandle(ref, () => triggerRef.current);
 
+  const menuRef = React.useRef(null);
+  const menuClassName = `${prefixCls}-menu`;
+
+  const { returnFocus } = useAccessibility({
+    visible: mergedVisible,
+    setTriggerVisible,
+    triggerRef,
+    menuRef,
+    menuClassName,
+    onVisibleChange: props.onVisibleChange,
+  });
+
   const getOverlayElement = (): React.ReactElement => {
     const { overlay } = props;
     let overlayElement: React.ReactElement;
@@ -88,6 +101,7 @@ function Dropdown(props: DropdownProps, ref) {
     if (overlayProps.onClick) {
       overlayProps.onClick(e);
     }
+    returnFocus();
   };
 
   const onVisibleChange = (newVisible: boolean) => {
@@ -101,7 +115,7 @@ function Dropdown(props: DropdownProps, ref) {
   const getMenuElement = () => {
     const overlayElement = getOverlayElement();
     const extraOverlayProps = {
-      prefixCls: `${prefixCls}-menu`,
+      prefixCls: menuClassName,
       onClick,
     };
     if (typeof overlayElement.type === 'string') {
@@ -110,7 +124,7 @@ function Dropdown(props: DropdownProps, ref) {
     return (
       <>
         {arrow && <div className={`${prefixCls}-arrow`} />}
-        {React.cloneElement(overlayElement, extraOverlayProps)}
+        <div ref={menuRef}>{React.cloneElement(overlayElement, extraOverlayProps)}</div>
       </>
     );
   };

src/hooks/useAccessibility.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import KeyCode from 'rc-util/lib/KeyCode';
+
+const { ESC, TAB } = KeyCode;
+
+interface UseAccessibilityProps {
+  visible: boolean;
+  setTriggerVisible: (visible: boolean) => void;
+  triggerRef: React.RefObject<any>;
+  menuRef: React.RefObject<HTMLUListElement>;
+  menuClassName: string;
+  onVisibleChange?: (visible: boolean) => void;
+}
+
+export default function useAccessibility({
+  visible,
+  setTriggerVisible,
+  triggerRef,
+  menuRef,
+  menuClassName,
+  onVisibleChange,
+}: UseAccessibilityProps) {
+  const handleCloseMenuAndReturnFocus = () => {
+    if (visible && triggerRef.current) {
+      if (triggerRef.current.triggerRef.current) {
+        triggerRef.current.triggerRef.current.focus();
+      }
+      setTriggerVisible(false);
+      if (typeof onVisibleChange === 'function') {
+        onVisibleChange(false);
+      }
+    }
+  };
+  const handleKeyDown = (event) => {
+    switch (event.keyCode) {
+      case ESC:
+        handleCloseMenuAndReturnFocus();
+        break;
+      case TAB:
+        handleCloseMenuAndReturnFocus();
+        break;
+    }
+  };
+  const focusOpenedMenu = () => {
+    if (menuRef.current) {
+      const menuList = menuRef.current.getElementsByClassName(menuClassName)[0];
+      if (menuList) {
+        menuList['focus'](); // eslint-disable-line @typescript-eslint/dot-notation
+      }
+    }
+  };
+
+  React.useEffect(() => {
+    if (visible) {
+      setTimeout(() => {
+        focusOpenedMenu();
+        window.addEventListener('keydown', handleKeyDown);
+      }, 100);
+      return () => {
+        window.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+    return () => null;
+  }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const returnFocus = () => {
+    if (visible && triggerRef.current) {
+      if (triggerRef.current.triggerRef.current) {
+        setTimeout(() => {
+          triggerRef.current.triggerRef.current.focus();
+        }, 100);
+      }
+    }
+  };
+
+  return {
+    returnFocus,
+  };
+}

tests/basic.test.js

@@ -1,6 +1,8 @@
 /* eslint-disable react/button-has-type,react/no-find-dom-node,react/no-render-return-value,object-shorthand,func-names,max-len */
 import React from 'react';
-import { mount } from 'enzyme';
+import ReactDOM from 'react-dom';
+import { mount, shallow } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import Menu, { Divider, Item as MenuItem } from 'rc-menu';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import { getPopupDomNode, sleep } from './utils';
@@ -284,4 +286,42 @@ describe('dropdown', () => {
       getPopupDomNode(dropdown).firstElementChild.classList.contains('rc-dropdown-arrow'),
     ).toBe(true);
   });
+
+  it('Keyboard navigation works', async () => {
+    const overlay = (
+      <Menu>
+        <MenuItem key="1">
+          <span className="my-menuitem">one</span>
+        </MenuItem>
+        <MenuItem key="2">two</MenuItem>
+      </Menu>
+    );
+    const dropdown = mount(
+      <Dropdown trigger={['click']} overlay={overlay} className="trigger-button">
+        <button className="my-button">open</button>
+      </Dropdown>,
+      { attachTo: document.body },
+    );
+    const trigger = dropdown.find('.my-button');
+
+    // Open menu
+    trigger.simulate('click');
+    await sleep(200);
+    expect(getPopupDomNode(dropdown).classList.contains('rc-dropdown-hidden')).toBe(false);
+
+    // Close menu with Esc
+    window.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 27 })); // Esc
+    await sleep(200);
+    expect(document.activeElement.className).toContain('my-button');
+
+    // Open menu
+    trigger.simulate('click');
+    await sleep(200);
+    expect(getPopupDomNode(dropdown).classList.contains('rc-dropdown-hidden')).toBe(false);
+
+    // Close menu with Tab
+    window.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 9 })); // Tab
+    await sleep(200);
+    expect(document.activeElement.className).toContain('my-button');
+  });
 });

tsconfig.json

@@ -22,4 +22,3 @@
     "tslint-config-prettier"
   ]
 }
-