feat(required-attr): require aria-checked for checkbox-like and radio…

…-like roles (#3785) Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>
dequelabs · Nov 17, 2022 · 563e4e9 · 563e4e9
1 parent d1cbf6f
commit 563e4e9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 30 deletions.
diff --git a/lib/standards/aria-roles.js b/lib/standards/aria-roles.js
@@ -79,13 +79,10 @@ const ariaRoles = {
   },
   checkbox: {
     type: 'widget',
-    // Note: since the checkbox role has an implicit
-    // aria-checked value it is not required to be added by
-    // the user
-    //
     // Note: aria-required is not in the 1.1 spec but is
     // consistently supported in ATs and was added in 1.2
-    allowedAttrs: ['aria-checked', 'aria-readonly', 'aria-required'],
+    requiredAttrs: ['aria-checked'],
+    allowedAttrs: ['aria-readonly', 'aria-required'],
     superclassRole: ['input'],
     accessibleNameRequired: true,
     nameFromContent: true,
@@ -370,12 +367,8 @@ const ariaRoles = {
   menuitemcheckbox: {
     type: 'widget',
     requiredContext: ['menu', 'menubar', 'group'],
-    allowedAttrs: [
-      'aria-checked',
-      'aria-posinset',
-      'aria-readonly',
-      'aria-setsize'
-    ],
+    requiredAttrs: ['aria-checked'],
+    allowedAttrs: ['aria-posinset', 'aria-readonly', 'aria-setsize'],
     superclassRole: ['checkbox', 'menuitem'],
     accessibleNameRequired: true,
     nameFromContent: true,
@@ -384,12 +377,8 @@ const ariaRoles = {
   menuitemradio: {
     type: 'widget',
     requiredContext: ['menu', 'menubar', 'group'],
-    allowedAttrs: [
-      'aria-checked',
-      'aria-posinset',
-      'aria-readonly',
-      'aria-setsize'
-    ],
+    requiredAttrs: ['aria-checked'],
+    allowedAttrs: ['aria-posinset', 'aria-readonly', 'aria-setsize'],
     superclassRole: ['menuitemcheckbox', 'radio'],
     accessibleNameRequired: true,
     nameFromContent: true,
@@ -465,18 +454,10 @@ const ariaRoles = {
   },
   radio: {
     type: 'widget',
-    // Note: since the radio role has an implicit
-    // aria-check value it is not required to be added by
-    // the user
-    //
     // Note: aria-required is not in the 1.1 or 1.2 specs but is
     // consistently supported in ATs on the individual radio element
-    allowedAttrs: [
-      'aria-checked',
-      'aria-posinset',
-      'aria-setsize',
-      'aria-required'
-    ],
+    requiredAttrs: ['aria-checked'],
+    allowedAttrs: ['aria-posinset', 'aria-setsize', 'aria-required'],
     superclassRole: ['input'],
     accessibleNameRequired: true,
     nameFromContent: true,

diff --git a/test/integration/rules/aria-required-attr/required-attr.html b/test/integration/rules/aria-required-attr/required-attr.html
@@ -44,8 +44,8 @@
 >
   ok
 </div>
-<span role="radio" id="pass6">I am BLUE!</span>
-<span role="radio" id="pass7" aria-checked="false">I am RED!</span>
+<span role="radio" id="pass6" aria-checked="false">I am RED!</span>
+<span role="radio" id="pass7" aria-checked="true">I am GREEN!</span>
 <span role="radio" id="pass8" aria-checked="true">I am GREEN!</span>
 <input type="number" role="spinbutton" id="pass9" value="10" />
 <input type="number" role="spinbutton" id="pass10" />
@@ -57,4 +57,5 @@
 <div role="slider" id="violation2">fail</div>
 <div role="heading" id="violation3">fail</div>
 <div role="combobox" id="violation4">fail</div>
-<div role="separator" id="violation5" tabindex="0"></div>
+<span role="radio" id="violation5">I am BLUE!</span>
+<div role="separator" id="violation6" tabindex="0"></div>
diff --git a/test/integration/rules/aria-required-attr/required-attr.json b/test/integration/rules/aria-required-attr/required-attr.json
@@ -7,6 +7,7 @@
     ["#violation3"],
     ["#violation4"],
     ["#violation5"],
+    ["#violation6"],
     ["#comboboxWithOwns"]
   ],
   "passes": [