WIP: Accessibility improvements

docs/demo/modes.md

@@ -0,0 +1,3 @@
+## modes
+
+<code src="../examples/modes.tsx">

docs/examples/modes.tsx

@@ -0,0 +1,49 @@
+/* eslint no-console:0 */
+
+import React from 'react';
+import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';
+import { MenuMode } from '@/interface';
+import '../../assets/index.less';
+
+export default () => {
+
+  const [mode, setMode] = React.useState<MenuMode>("horizontal")
+
+  const [width, setWidth] = React.useState(400)
+
+  function handleSelect(info) {
+    console.log('selected ', info);
+  }
+
+  function handleClick(info) {
+    console.log('click ', info);
+  }
+
+  return (
+    <div>
+      <select value={mode} onChange={(e) => setMode(e.target.value as MenuMode)}>
+        <option>horizontal</option>
+        <option>inline</option>
+        <option>vertical</option>
+        <option>vertical-left</option>
+        <option>vertical-right</option>
+      </select>
+
+      <input value={width} onChange={e => setWidth(Number(e.target.value))} />
+
+      <div style={{ width }}>
+        <Menu onSelect={handleSelect} defaultActiveFirst onClick={handleClick} mode={mode}>
+          <MenuItem key="1">item 1</MenuItem>
+          <MenuItem disabled>disabled</MenuItem>
+          <MenuItem key="3">item 3</MenuItem>
+          <MenuItem key="4">item 4</MenuItem>
+          <SubMenu title="item 5" key="5">
+            <MenuItem key="5-1">item 5-1</MenuItem>
+            <MenuItem key="5-2">item 5-2</MenuItem>
+          </SubMenu>
+          <MenuItem key="6">item 6</MenuItem>
+        </Menu>
+      </div>
+    </div>
+  );
+};

src/Menu.tsx

@@ -111,6 +111,7 @@ class Menu extends React.Component<MenuProps, MenuState> {
       selectedKeys,
       openKeys,
       activeKey: { '0-menu-': getActiveKey(props, props.activeKey) },
+      focused: false
     });
 
     this.state = {
@@ -123,6 +124,8 @@ class Menu extends React.Component<MenuProps, MenuState> {
 
   isRootMenu: boolean;
 
+  blurTimeout: number;
+
   store: MiniStore;
 
   innerMenu: typeof SubPopupMenu;
@@ -344,6 +347,21 @@ class Menu extends React.Component<MenuProps, MenuState> {
     }
   };
 
+  onFocus =() => {
+    clearTimeout(this.blurTimeout)
+    this.store.setState({
+      focused: true
+    });
+  }
+
+  onBlur =() => {
+    this.blurTimeout = setTimeout(() => {
+      this.store.setState({
+        focused: false
+      });
+    })
+  }
+
   onTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>) => {
     // when inlineCollapsed menu width animation finished
     // https://github.com/ant-design/ant-design/issues/12864
@@ -418,6 +436,8 @@ class Menu extends React.Component<MenuProps, MenuState> {
       onSelect: this.onSelect,
       onMouseEnter: this.onMouseEnter,
       onTransitionEnd: this.onTransitionEnd,
+      onFocus: this.onFocus,
+      onBlur:  this.onBlur,
       parentMenu: this,
       motion: getMotion(this.props, this.state, mode),
     };

src/MenuItem.tsx

@@ -67,10 +67,22 @@ export class MenuItem extends React.Component<MenuItemProps> {
   componentDidMount() {
     // invoke customized ref to expose component to mixin
     this.callRef();
+    if (this.props.active && this.props.focused) {
+      setTimeout(() => {
+        this.node.focus()
+        console.log("focus menuitem mount");
+      });
+    }
   }
 
   componentDidUpdate() {
     this.callRef();
+    if (this.props.active && this.props.focused) {
+      setTimeout(() => {
+        this.node.focus()
+        console.log("focus menuitem");
+      });
+    }
   }
 
   componentWillUnmount() {
@@ -240,6 +252,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
         {...mouseEvent}
         style={style}
         ref={this.saveNode}
+        tabIndex={this.props.active ? 0 : -1}
       >
         {props.children}
         {icon}
@@ -249,9 +262,10 @@ export class MenuItem extends React.Component<MenuItemProps> {
 }
 
 const connected = connect<any, any, any>(
-  ({ activeKey, selectedKeys }, { eventKey, subMenuKey }) => ({
+  ({ activeKey, selectedKeys, focused }, { eventKey, subMenuKey }) => ({
     active: activeKey[subMenuKey] === eventKey,
     isSelected: selectedKeys.indexOf(eventKey) !== -1,
+    focused
   }),
 )(MenuItem);
 

src/SubMenu.tsx

@@ -197,6 +197,10 @@ export class SubMenu extends React.Component<SubMenuProps, SubMenuState> {
       manualRef(this);
     }
 
+    if (this.props.active && this.props.focused) {
+      this.node?.focus()
+    }
+
     if (mode !== 'horizontal' || !parentMenu?.isRootMenu || !isOpen) {
       return;
     }
@@ -620,9 +624,6 @@ export class SubMenu extends React.Component<SubMenuProps, SubMenuState> {
         role="button"
         {...titleMouseEvents}
         {...titleClickEvents}
-        aria-expanded={visible}
-        {...ariaOwns}
-        aria-haspopup="true"
         title={typeof props.title === 'string' ? props.title : undefined}
       >
         {props.title}
@@ -668,8 +669,13 @@ export class SubMenu extends React.Component<SubMenuProps, SubMenuState> {
       <li
         {...(props as any)}
         {...mouseEvents}
+        {...ariaOwns}
         className={className}
         role="menuitem"
+        tabIndex={this.props.active ? 0 : -1}
+        ref={elem => this.node = elem}
+        aria-expanded={visible}
+        aria-haspopup="true"
       >
         <Trigger
           prefixCls={prefixCls}
@@ -696,10 +702,11 @@ export class SubMenu extends React.Component<SubMenuProps, SubMenuState> {
 }
 
 const connected = connect<any, any, any>(
-  ({ openKeys, activeKey, selectedKeys }, { eventKey, subMenuKey }) => ({
+  ({ openKeys, activeKey, selectedKeys, focused }, { eventKey, subMenuKey }) => ({
     isOpen: openKeys.indexOf(eventKey) > -1,
     active: activeKey[subMenuKey] === eventKey,
     selectedKeys,
+    focused
   }),
 )(SubMenu as any);
 

src/SubPopupMenu.tsx

@@ -327,7 +327,7 @@ export class SubPopupMenu extends React.Component<SubPopupMenuProps> {
 
     do {
       const child = children[i];
-      if (!child || child.props.disabled) {
+      if (!child || child.props.disabled || child.props.style?.display === 'none') {
         i = (i + 1) % len;
       } else {
         return child;
@@ -435,7 +435,6 @@ export class SubPopupMenu extends React.Component<SubPopupMenuProps> {
       domProps.id = props.id;
     }
     if (props.focusable) {
-      domProps.tabIndex = 0;
       domProps.onKeyDown = this.onKeyDown as any;
     }
     const {