fix(aria-allowed-attr): pass aria-expanded on checkbox & switch (#4110)

* update role allowances for aria-expanded All roles reviewed to largely remove (but in a few cases add) `aria-expanded` as a supported attribute. This matches both work done in ARIA 1.2 to correct for roles that should not have allowed the attribute, while also incorporating some ARIA 1.2 updates where some roles had support for the attribute added. closes #3339 * fix(aria-allowed-attr): allow aria-expanded on more roles * Integration tests * Update lib/standards/aria-roles.js Co-authored-by: Steven Lambert <2433219+straker@users.noreply.github.com> * Tweak comments --------- Co-authored-by: Scott O'Hara <scottaohara@users.noreply.github.com> Co-authored-by: Steven Lambert <2433219+straker@users.noreply.github.com>
dequelabs · Aug 8, 2023 · fcf76e0 · fcf76e0
1 parent 4deb0a0
commit fcf76e0
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/lib/standards/aria-roles.js b/lib/standards/aria-roles.js
@@ -18,11 +18,13 @@
 const ariaRoles = {
   alert: {
     type: 'widget',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section']
   },
   alertdialog: {
     type: 'widget',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded', 'aria-modal'],
     superclassRole: ['alert', 'dialog'],
     accessibleNameRequired: true
@@ -38,11 +40,13 @@ const ariaRoles = {
   },
   article: {
     type: 'structure',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-posinset', 'aria-setsize', 'aria-expanded'],
     superclassRole: ['document']
   },
   banner: {
     type: 'landmark',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['landmark']
   },
@@ -67,6 +71,7 @@ const ariaRoles = {
   cell: {
     type: 'structure',
     requiredContext: ['row'],
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: [
       'aria-colindex',
       'aria-colspan',
@@ -82,7 +87,7 @@ const ariaRoles = {
     // Note: aria-required is not in the 1.1 spec but is
     // consistently supported in ATs and was added in 1.2
     requiredAttrs: ['aria-checked'],
-    allowedAttrs: ['aria-readonly', 'aria-required'],
+    allowedAttrs: ['aria-readonly', 'aria-expanded', 'aria-required'],
     superclassRole: ['input'],
     accessibleNameRequired: true,
     nameFromContent: true,
@@ -96,6 +101,7 @@ const ariaRoles = {
   columnheader: {
     type: 'structure',
     requiredContext: ['row'],
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: [
       'aria-sort',
       'aria-colindex',
@@ -132,6 +138,7 @@ const ariaRoles = {
   },
   complementary: {
     type: 'landmark',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['landmark']
   },
@@ -141,6 +148,7 @@ const ariaRoles = {
   },
   contentinfo: {
     type: 'landmark',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['landmark']
   },
@@ -151,6 +159,7 @@ const ariaRoles = {
   },
   definition: {
     type: 'structure',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section']
   },
@@ -161,20 +170,23 @@ const ariaRoles = {
   },
   dialog: {
     type: 'widget',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded', 'aria-modal'],
     superclassRole: ['window'],
     accessibleNameRequired: true
   },
   directory: {
     type: 'structure',
     deprecated: true,
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['list'],
     // Note: spec difference
     nameFromContent: true
   },
   document: {
     type: 'structure',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['structure']
   },
@@ -186,24 +198,28 @@ const ariaRoles = {
   feed: {
     type: 'structure',
     requiredOwned: ['article'],
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['list']
   },
   figure: {
     type: 'structure',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section'],
     // Note: spec difference
     nameFromContent: true
   },
   form: {
     type: 'landmark',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['landmark']
   },
   grid: {
     type: 'composite',
     requiredOwned: ['rowgroup', 'row'],
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: [
       'aria-level',
       'aria-multiselectable',
@@ -235,12 +251,14 @@ const ariaRoles = {
   },
   group: {
     type: 'structure',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-activedescendant', 'aria-expanded'],
     superclassRole: ['section']
   },
   heading: {
     type: 'structure',
     requiredAttrs: ['aria-level'],
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['sectionhead'],
     // Note: spec difference
@@ -249,6 +267,7 @@ const ariaRoles = {
   },
   img: {
     type: 'structure',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section'],
     accessibleNameRequired: true,
@@ -277,6 +296,7 @@ const ariaRoles = {
   list: {
     type: 'structure',
     requiredOwned: ['listitem'],
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section']
   },
@@ -309,21 +329,25 @@ const ariaRoles = {
   },
   log: {
     type: 'widget',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section']
   },
   main: {
     type: 'landmark',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['landmark']
   },
   marquee: {
     type: 'widget',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section']
   },
   math: {
     type: 'structure',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section'],
     childrenPresentational: true
@@ -339,6 +363,7 @@ const ariaRoles = {
       'menu',
       'separator'
     ],
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: [
       'aria-activedescendant',
       'aria-expanded',
@@ -357,6 +382,7 @@ const ariaRoles = {
       'menu',
       'separator'
     ],
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: [
       'aria-activedescendant',
       'aria-expanded',
@@ -419,6 +445,7 @@ const ariaRoles = {
   },
   navigation: {
     type: 'landmark',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['landmark']
   },
@@ -429,6 +456,7 @@ const ariaRoles = {
   },
   note: {
     type: 'structure',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section']
   },
@@ -461,6 +489,7 @@ const ariaRoles = {
   },
   progressbar: {
     type: 'widget',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: [
       'aria-expanded',
       'aria-valuemax',
@@ -486,6 +515,7 @@ const ariaRoles = {
   radiogroup: {
     type: 'composite',
     // Note: spec difference (no required owned)
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: [
       'aria-readonly',
       'aria-required',
@@ -503,6 +533,7 @@ const ariaRoles = {
   },
   region: {
     type: 'landmark',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['landmark'],
     // Note: spec difference
@@ -539,6 +570,7 @@ const ariaRoles = {
   rowheader: {
     type: 'structure',
     requiredContext: ['row'],
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: [
       'aria-sort',
       'aria-colindex',
@@ -577,6 +609,7 @@ const ariaRoles = {
   },
   search: {
     type: 'landmark',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['landmark']
   },
@@ -664,6 +697,7 @@ const ariaRoles = {
   },
   status: {
     type: 'widget',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section']
   },
@@ -689,7 +723,7 @@ const ariaRoles = {
   switch: {
     type: 'widget',
     requiredAttrs: ['aria-checked'],
-    allowedAttrs: ['aria-readonly', 'aria-required'],
+    allowedAttrs: ['aria-expanded', 'aria-readonly', 'aria-required'],
     superclassRole: ['checkbox'],
     accessibleNameRequired: true,
     nameFromContent: true,
@@ -704,6 +738,7 @@ const ariaRoles = {
   tab: {
     type: 'widget',
     requiredContext: ['tablist'],
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: [
       'aria-posinset',
       'aria-selected',
@@ -717,6 +752,7 @@ const ariaRoles = {
   table: {
     type: 'structure',
     requiredOwned: ['rowgroup', 'row'],
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-colcount', 'aria-rowcount', 'aria-expanded'],
     // NOTE: although the spec says this is not named from contents,
     // the accessible text acceptance tests (#139 and #140) require
@@ -743,13 +779,15 @@ const ariaRoles = {
   },
   tabpanel: {
     type: 'widget',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section'],
     // Note: spec difference
     accessibleNameRequired: false
   },
   term: {
     type: 'structure',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section'],
     // Note: spec difference
@@ -779,11 +817,13 @@ const ariaRoles = {
   },
   timer: {
     type: 'widget',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['status']
   },
   toolbar: {
     type: 'structure',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: [
       'aria-orientation',
       'aria-activedescendant',
@@ -794,13 +834,15 @@ const ariaRoles = {
   },
   tooltip: {
     type: 'structure',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section'],
     nameFromContent: true
   },
   tree: {
     type: 'composite',
     requiredOwned: ['group', 'treeitem'],
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: [
       'aria-multiselectable',
       'aria-required',
@@ -815,6 +857,7 @@ const ariaRoles = {
   treegrid: {
     type: 'composite',
     requiredOwned: ['rowgroup', 'row'],
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: [
       'aria-activedescendant',
       'aria-colcount',

diff --git a/test/integration/rules/aria-allowed-attr/passes.html b/test/integration/rules/aria-allowed-attr/passes.html
@@ -1901,6 +1901,7 @@
 <div
   role="switch"
   id="pass62"
+  aria-expanded="value"
   aria-checked="value"
   aria-atomic="value"
   aria-braillelabel="value"
@@ -2092,8 +2093,9 @@
 <button id="pass73" aria-roledescription="attachment button"></button>
 <input
   type="checkbox"
-  aria-roledescription="cuisine type checkbox"
   id="pass74"
+  aria-roledescription="cuisine type checkbox"
+  aria-expanded="false"
 />
 
 <span role="radio" id="pass75" aria-checked="false">I am RED!</span>