Skip to content

Commit

Permalink
fix(aria-allowed-attr): pass aria-expanded on checkbox & switch (#4110)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
3 people authored Aug 8, 2023
1 parent 4deb0a0 commit fcf76e0
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 3 deletions.
47 changes: 45 additions & 2 deletions lib/standards/aria-roles.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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']
},
Expand All @@ -67,6 +71,7 @@ const ariaRoles = {
cell: {
type: 'structure',
requiredContext: ['row'],
// Spec difference: Aria-expanded removed in 1.2
allowedAttrs: [
'aria-colindex',
'aria-colspan',
Expand All @@ -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,
Expand All @@ -96,6 +101,7 @@ const ariaRoles = {
columnheader: {
type: 'structure',
requiredContext: ['row'],
// Spec difference: Aria-expanded removed in 1.2
allowedAttrs: [
'aria-sort',
'aria-colindex',
Expand Down Expand Up @@ -132,6 +138,7 @@ const ariaRoles = {
},
complementary: {
type: 'landmark',
// Spec difference: Aria-expanded removed in 1.2
allowedAttrs: ['aria-expanded'],
superclassRole: ['landmark']
},
Expand All @@ -141,6 +148,7 @@ const ariaRoles = {
},
contentinfo: {
type: 'landmark',
// Spec difference: Aria-expanded removed in 1.2
allowedAttrs: ['aria-expanded'],
superclassRole: ['landmark']
},
Expand All @@ -151,6 +159,7 @@ const ariaRoles = {
},
definition: {
type: 'structure',
// Spec difference: Aria-expanded removed in 1.2
allowedAttrs: ['aria-expanded'],
superclassRole: ['section']
},
Expand All @@ -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']
},
Expand All @@ -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',
Expand Down Expand Up @@ -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
Expand All @@ -249,6 +267,7 @@ const ariaRoles = {
},
img: {
type: 'structure',
// Spec difference: Aria-expanded removed in 1.2
allowedAttrs: ['aria-expanded'],
superclassRole: ['section'],
accessibleNameRequired: true,
Expand Down Expand Up @@ -277,6 +296,7 @@ const ariaRoles = {
list: {
type: 'structure',
requiredOwned: ['listitem'],
// Spec difference: Aria-expanded removed in 1.2
allowedAttrs: ['aria-expanded'],
superclassRole: ['section']
},
Expand Down Expand Up @@ -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
Expand All @@ -339,6 +363,7 @@ const ariaRoles = {
'menu',
'separator'
],
// Spec difference: Aria-expanded removed in 1.2
allowedAttrs: [
'aria-activedescendant',
'aria-expanded',
Expand All @@ -357,6 +382,7 @@ const ariaRoles = {
'menu',
'separator'
],
// Spec difference: Aria-expanded removed in 1.2
allowedAttrs: [
'aria-activedescendant',
'aria-expanded',
Expand Down Expand Up @@ -419,6 +445,7 @@ const ariaRoles = {
},
navigation: {
type: 'landmark',
// Spec difference: Aria-expanded removed in 1.2
allowedAttrs: ['aria-expanded'],
superclassRole: ['landmark']
},
Expand All @@ -429,6 +456,7 @@ const ariaRoles = {
},
note: {
type: 'structure',
// Spec difference: Aria-expanded removed in 1.2
allowedAttrs: ['aria-expanded'],
superclassRole: ['section']
},
Expand Down Expand Up @@ -461,6 +489,7 @@ const ariaRoles = {
},
progressbar: {
type: 'widget',
// Spec difference: Aria-expanded removed in 1.2
allowedAttrs: [
'aria-expanded',
'aria-valuemax',
Expand All @@ -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',
Expand All @@ -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
Expand Down Expand Up @@ -539,6 +570,7 @@ const ariaRoles = {
rowheader: {
type: 'structure',
requiredContext: ['row'],
// Spec difference: Aria-expanded removed in 1.2
allowedAttrs: [
'aria-sort',
'aria-colindex',
Expand Down Expand Up @@ -577,6 +609,7 @@ const ariaRoles = {
},
search: {
type: 'landmark',
// Spec difference: Aria-expanded removed in 1.2
allowedAttrs: ['aria-expanded'],
superclassRole: ['landmark']
},
Expand Down Expand Up @@ -664,6 +697,7 @@ const ariaRoles = {
},
status: {
type: 'widget',
// Spec difference: Aria-expanded removed in 1.2
allowedAttrs: ['aria-expanded'],
superclassRole: ['section']
},
Expand All @@ -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,
Expand All @@ -704,6 +738,7 @@ const ariaRoles = {
tab: {
type: 'widget',
requiredContext: ['tablist'],
// Spec difference: Aria-expanded removed in 1.2
allowedAttrs: [
'aria-posinset',
'aria-selected',
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand Down
4 changes: 3 additions & 1 deletion test/integration/rules/aria-allowed-attr/passes.html
Original file line number Diff line number Diff line change
Expand Up @@ -1901,6 +1901,7 @@
<div
role="switch"
id="pass62"
aria-expanded="value"
aria-checked="value"
aria-atomic="value"
aria-braillelabel="value"
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit fcf76e0

Please sign in to comment.