From fcf76e04d8534dfed75caf1f2c4a74ef4faa29ae Mon Sep 17 00:00:00 2001
From: Wilco Fiers <WilcoFiers@users.noreply.github.com>
Date: Tue, 8 Aug 2023 14:35:10 +0200
Subject: [PATCH] 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>
---
 lib/standards/aria-roles.js                   | 47 ++++++++++++++++++-
 .../rules/aria-allowed-attr/passes.html       |  4 +-
 2 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/lib/standards/aria-roles.js b/lib/standards/aria-roles.js
index 7a39a1486d..340fdb9b14 100644
--- 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,6 +170,7 @@ const ariaRoles = {
   },
   dialog: {
     type: 'widget',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded', 'aria-modal'],
     superclassRole: ['window'],
     accessibleNameRequired: true
@@ -168,6 +178,7 @@ const ariaRoles = {
   directory: {
     type: 'structure',
     deprecated: true,
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['list'],
     // Note: spec difference
@@ -175,6 +186,7 @@ const ariaRoles = {
   },
   document: {
     type: 'structure',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['structure']
   },
@@ -186,11 +198,13 @@ 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
@@ -198,12 +212,14 @@ const ariaRoles = {
   },
   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,6 +779,7 @@ const ariaRoles = {
   },
   tabpanel: {
     type: 'widget',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section'],
     // Note: spec difference
@@ -750,6 +787,7 @@ const ariaRoles = {
   },
   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,6 +834,7 @@ const ariaRoles = {
   },
   tooltip: {
     type: 'structure',
+    // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section'],
     nameFromContent: true
@@ -801,6 +842,7 @@ const ariaRoles = {
   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
index 1812f63cdc..dfef5d3ed5 100644
--- 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>