fix(a11y): ] MenuItemGroup, SubMenuList add some role attributes for …

…improved a11y (react-component#569) * fix(MenuItemGroup): Address a11y issues via role attributes * fix(SubMenuList): Add role=menu to SubMenuList as this role is required by the children menuitems * chore: pr feedback for react-component#569
vkboo · Dec 27, 2022 · 7fe378c · 7fe378c
1 parent 15c36f1
commit 7fe378c
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 4 deletions.
diff --git a/src/MenuItemGroup.tsx b/src/MenuItemGroup.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
-import { parseChildren } from './utils/nodeUtil';
+import * as React from 'react';
 import { MenuContext } from './context/MenuContext';
 import { useFullPath, useMeasure } from './context/PathContext';
 import type { MenuItemGroupType } from './interface';
+import { parseChildren } from './utils/nodeUtil';
 
 export interface MenuItemGroupProps
   extends Omit<MenuItemGroupType, 'type' | 'children' | 'label'> {
@@ -32,17 +32,21 @@ const InternalMenuItemGroup = ({
 
   return (
     <li
+      role="presentation"
       {...restProps}
       onClick={e => e.stopPropagation()}
       className={classNames(groupPrefixCls, className)}
     >
       <div
+        role="presentation"
         className={`${groupPrefixCls}-title`}
         title={typeof title === 'string' ? title : undefined}
       >
         {title}
       </div>
-      <ul className={`${groupPrefixCls}-list`}>{children}</ul>
+      <ul role="group" className={`${groupPrefixCls}-list`}>
+        {children}
+      </ul>
     </li>
   );
 };
@@ -59,7 +63,7 @@ export default function MenuItemGroup({
 
   const measure = useMeasure();
   if (measure) {
-    return childList as any as React.ReactElement;
+    return (childList as any) as React.ReactElement;
   }
 
   return (

diff --git a/src/SubMenu/SubMenuList.tsx b/src/SubMenu/SubMenuList.tsx
@@ -22,6 +22,7 @@ const InternalSubMenuList = (
         `${prefixCls}-${mode === 'inline' ? 'inline' : 'vertical'}`,
         className,
       )}
+      role="menu"
       {...restProps}
       data-menu-list
       ref={ref}

diff --git a/tests/__snapshots__/Keyboard.spec.tsx.snap b/tests/__snapshots__/Keyboard.spec.tsx.snap
@@ -32,6 +32,7 @@ HTMLCollection [
         class="rc-menu rc-menu-sub rc-menu-inline"
         data-menu-list="true"
         id="rc-menu-uuid-test-light-popup"
+        role="menu"
       >
         <li
           class="rc-menu-item"

diff --git a/tests/__snapshots__/Menu.spec.js.snap b/tests/__snapshots__/Menu.spec.js.snap
@@ -53,15 +53,18 @@ HTMLCollection [
   >
     <li
       class="rc-menu-item-group"
+      role="presentation"
     >
       <div
         class="rc-menu-item-group-title"
+        role="presentation"
         title="g1"
       >
         g1
       </div>
       <ul
         class="rc-menu-item-group-list"
+        role="group"
       >
         <li
           class="rc-menu-item"
@@ -94,15 +97,18 @@ HTMLCollection [
     </li>
     <li
       class="rc-menu-item-group"
+      role="presentation"
     >
       <div
         class="rc-menu-item-group-title"
+        role="presentation"
         title="g2"
       >
         g2
       </div>
       <ul
         class="rc-menu-item-group-list"
+        role="group"
       >
         <li
           class="rc-menu-item"
@@ -161,15 +167,18 @@ HTMLCollection [
   >
     <li
       class="rc-menu-item-group"
+      role="presentation"
     >
       <div
         class="rc-menu-item-group-title"
+        role="presentation"
         title="g1"
       >
         g1
       </div>
       <ul
         class="rc-menu-item-group-list"
+        role="group"
       >
         <li
           class="rc-menu-item"
@@ -202,15 +211,18 @@ HTMLCollection [
     </li>
     <li
       class="rc-menu-item-group"
+      role="presentation"
     >
       <div
         class="rc-menu-item-group-title"
+        role="presentation"
         title="g2"
       >
         g2
       </div>
       <ul
         class="rc-menu-item-group-list"
+        role="group"
       >
         <li
           class="rc-menu-item"
@@ -268,15 +280,18 @@ HTMLCollection [
   >
     <li
       class="rc-menu-item-group"
+      role="presentation"
     >
       <div
         class="rc-menu-item-group-title"
+        role="presentation"
         title="g1"
       >
         g1
       </div>
       <ul
         class="rc-menu-item-group-list"
+        role="group"
       >
         <li
           class="rc-menu-item"
@@ -312,15 +327,18 @@ HTMLCollection [
     </li>
     <li
       class="rc-menu-item-group"
+      role="presentation"
     >
       <div
         class="rc-menu-item-group-title"
+        role="presentation"
         title="g2"
       >
         g2
       </div>
       <ul
         class="rc-menu-item-group-list"
+        role="group"
       >
         <li
           class="rc-menu-item"
@@ -382,15 +400,18 @@ HTMLCollection [
   >
     <li
       class="rc-menu-item-group"
+      role="presentation"
     >
       <div
         class="rc-menu-item-group-title"
+        role="presentation"
         title="g1"
       >
         g1
       </div>
       <ul
         class="rc-menu-item-group-list"
+        role="group"
       >
         <li
           class="rc-menu-item"
@@ -426,15 +447,18 @@ HTMLCollection [
     </li>
     <li
       class="rc-menu-item-group"
+      role="presentation"
     >
       <div
         class="rc-menu-item-group-title"
+        role="presentation"
         title="g2"
       >
         g2
       </div>
       <ul
         class="rc-menu-item-group-list"
+        role="group"
       >
         <li
           class="rc-menu-item"
@@ -567,15 +591,18 @@ HTMLCollection [
   >
     <li
       class="rc-menu-item-group"
+      role="presentation"
     >
       <div
         class="rc-menu-item-group-title"
+        role="presentation"
         title="g1"
       >
         g1
       </div>
       <ul
         class="rc-menu-item-group-list"
+        role="group"
       >
         <li
           class="rc-menu-item"
@@ -608,15 +635,18 @@ HTMLCollection [
     </li>
     <li
       class="rc-menu-item-group"
+      role="presentation"
     >
       <div
         class="rc-menu-item-group-title"
+        role="presentation"
         title="g2"
       >
         g2
       </div>
       <ul
         class="rc-menu-item-group-list"
+        role="group"
       >
         <li
           class="rc-menu-item"
@@ -675,15 +705,18 @@ HTMLCollection [
   >
     <li
       class="rc-menu-item-group"
+      role="presentation"
     >
       <div
         class="rc-menu-item-group-title"
+        role="presentation"
         title="g1"
       >
         g1
       </div>
       <ul
         class="rc-menu-item-group-list"
+        role="group"
       >
         <li
           class="rc-menu-item"
@@ -716,15 +749,18 @@ HTMLCollection [
     </li>
     <li
       class="rc-menu-item-group"
+      role="presentation"
     >
       <div
         class="rc-menu-item-group-title"
+        role="presentation"
         title="g2"
       >
         g2
       </div>
       <ul
         class="rc-menu-item-group-list"
+        role="group"
       >
         <li
           class="rc-menu-item"

diff --git a/tests/__snapshots__/MenuItem.spec.js.snap b/tests/__snapshots__/MenuItem.spec.js.snap
@@ -90,6 +90,7 @@ HTMLCollection [
         class="rc-menu rc-menu-sub rc-menu-inline"
         data-menu-list="true"
         id="rc-menu-uuid-test-bamboo-popup"
+        role="menu"
       >
         <li
           class="rc-menu-item className"
@@ -107,16 +108,19 @@ HTMLCollection [
     <li
       class="rc-menu-item-group className"
       data-whatever="whatever"
+      role="presentation"
       style="font-size: 20px;"
     >
       <div
         class="rc-menu-item-group-title"
+        role="presentation"
         title="title"
       >
         title
       </div>
       <ul
         class="rc-menu-item-group-list"
+        role="group"
       >
         <li
           class="rc-menu-item className"

diff --git a/tests/__snapshots__/Options.spec.tsx.snap b/tests/__snapshots__/Options.spec.tsx.snap
@@ -32,18 +32,22 @@ HTMLCollection [
         class="rc-menu rc-menu-sub rc-menu-inline"
         data-menu-list="true"
         id="rc-menu-uuid-test-sub1-popup"
+        role="menu"
       >
         <li
           class="rc-menu-item-group"
+          role="presentation"
         >
           <div
             class="rc-menu-item-group-title"
+            role="presentation"
             title="Menu Group"
           >
             Menu Group
           </div>
           <ul
             class="rc-menu-item-group-list"
+            role="group"
           >
             <li
               class="rc-menu-item"

diff --git a/tests/__snapshots__/SubMenu.spec.js.snap b/tests/__snapshots__/SubMenu.spec.js.snap
@@ -90,6 +90,7 @@ HTMLCollection [
             class="rc-menu rc-menu-sub rc-menu-vertical"
             data-menu-list="true"
             id="rc-menu-uuid-test-1-popup"
+            role="menu"
           >
             <li
               aria-selected="false"