fix(aria-required-children): allow separator in menu(bar) (#3868)

WilcoFiers · web-flow · commit ec9f50708a23 · 2023-01-23T08:57:29.000-07:00
diff --git a/lib/standards/aria-roles.js b/lib/standards/aria-roles.js
@@ -329,12 +329,14 @@ const ariaRoles = {
   },
   menu: {
     type: 'composite',
+    // Note: spec difference (menu & separator as required owned)
     requiredOwned: [
       'group',
       'menuitemradio',
       'menuitem',
       'menuitemcheckbox',
-      'menu'
+      'menu',
+      'separator'
     ],
     allowedAttrs: [
       'aria-activedescendant',
@@ -345,13 +347,14 @@ const ariaRoles = {
   },
   menubar: {
     type: 'composite',
-    // Note: spec difference (menu as required owned)
+    // Note: spec difference (menu & separator as required owned)
     requiredOwned: [
       'group',
       'menuitemradio',
       'menuitem',
       'menuitemcheckbox',
-      'menu'
+      'menu',
+      'separator'
     ],
     allowedAttrs: [
       'aria-activedescendant',
diff --git a/test/integration/rules/aria-required-children/aria-required-children.html b/test/integration/rules/aria-required-children/aria-required-children.html
@@ -49,8 +49,9 @@
 <div role="menu" id="pass7">
   <ul role="group" id="ignore11">
     <li role="menuitem" id="ignore12">>Inbox</li>
-    <li role="menuitem" id="ignore13">>Archive</li>
-    <li role="menuitem" id="ignore14">>Trash</li>
+    <li role="separator" id="ignored13"></li>
+    <li role="menuitem" id="ignore14">>Archive</li>
+    <li role="menuitem" id="ignore15">>Trash</li>
   </ul>
 </div>
 
@@ -127,3 +128,10 @@
     </ul>
   </li>
 </ul>
+
+<nav role="menubar" id="pass17">
+  <a role="menuitem" href="">Item 1</a>
+  <a role="menuitem" href="">Item 2</a>
+  <span role="separator"></span>
+  <a role="menuitem" href="">Item 3</a>
+</nav>
diff --git a/test/integration/rules/aria-required-children/aria-required-children.json b/test/integration/rules/aria-required-children/aria-required-children.json
@@ -31,7 +31,8 @@
     ["#pass13"],
     ["#pass14"],
     ["#pass15"],
-    ["#pass16"]
+    ["#pass16"],
+    ["#pass17"]
   ],
   "incomplete": [
     ["#incomplete1"],
