From 86dfaf48825b471d4e01610616ea6127f8d9facc Mon Sep 17 00:00:00 2001 From: Red Gardner Date: Tue, 27 Oct 2020 12:29:55 -0500 Subject: [PATCH 1/3] feat(standards): add superclassRole to ariaRoles Added superclassRole attributes as an array of strings per WAI-ARIA 1.1 spec Closes issue 2151 --- lib/standards/aria-roles.js | 200 ++++++++++++++++++++++++++---------- 1 file changed, 146 insertions(+), 54 deletions(-) diff --git a/lib/standards/aria-roles.js b/lib/standards/aria-roles.js index 95ba637130..3efa167de6 100644 --- a/lib/standards/aria-roles.js +++ b/lib/standards/aria-roles.js @@ -18,26 +18,31 @@ const ariaRoles = { alert: { type: 'widget', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['section'] }, alertdialog: { type: 'widget', - allowedAttrs: ['aria-expanded', 'aria-modal'] + allowedAttrs: ['aria-expanded', 'aria-modal'], + superclassRole: ['alert', 'dialog'] }, application: { // Note: spec difference type: 'landmark', // Note: aria-expanded is not in the 1.1 spec but is // consistently supported in ATs and was added in 1.2 - allowedAttrs: ['aria-activedescendant', 'aria-expanded'] + allowedAttrs: ['aria-activedescendant', 'aria-expanded'], + superclassRole: ['structure'] }, article: { type: 'structure', - allowedAttrs: ['aria-posinset', 'aria-setsize', 'aria-expanded'] + allowedAttrs: ['aria-posinset', 'aria-setsize', 'aria-expanded'], + superclassRole: ['document'] }, banner: { type: 'landmark', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['landmark'] }, blockquote: { type: 'structure' @@ -45,6 +50,7 @@ const ariaRoles = { button: { type: 'widget', allowedAttrs: ['aria-expanded', 'aria-pressed'], + superclassRole: ['command'], nameFromContent: true }, caption: { @@ -61,6 +67,7 @@ const ariaRoles = { 'aria-rowspan', 'aria-expanded' ], + superclassRole: ['section'], nameFromContent: true }, checkbox: { @@ -72,6 +79,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 allowedAttrs: ['aria-checked', 'aria-readonly', 'aria-required'], + superclassRole: ['input'], nameFromContent: true }, code: { @@ -91,6 +99,7 @@ const ariaRoles = { 'aria-rowspan', 'aria-selected' ], + superclassRole: ['cell', 'gridcell', 'sectionhead'], nameFromContent: true }, combobox: { @@ -107,42 +116,51 @@ const ariaRoles = { 'aria-required', 'aria-activedescendant', 'aria-orientation' - ] + ], + superclassRole: ['select'] }, command: { - type: 'abstract' + type: 'abstract', + superclassRole: ['widget'] }, complementary: { type: 'landmark', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['landmark'] }, composite: { - type: 'abstract' + type: 'abstract', + superclassRole: ['widget'] }, contentinfo: { type: 'landmark', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['landmark'] }, definition: { type: 'structure', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['section'] }, deletion: { type: 'structure' }, dialog: { type: 'widget', - allowedAttrs: ['aria-expanded', 'aria-modal'] + allowedAttrs: ['aria-expanded', 'aria-modal'], + superclassRole: ['window'] }, directory: { type: 'structure', allowedAttrs: ['aria-expanded'], // Note: spec difference + superclassRole: ['list'], nameFromContent: true }, document: { type: 'structure', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['structure'] }, emphasis: { type: 'structure' @@ -150,17 +168,20 @@ const ariaRoles = { feed: { type: 'structure', requiredOwned: ['article'], - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['list'] }, figure: { type: 'structure', allowedAttrs: ['aria-expanded'], // Note: spec difference + superclassRole: ['section'], nameFromContent: true }, form: { type: 'landmark', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['landmark'] }, grid: { type: 'composite', @@ -173,7 +194,8 @@ const ariaRoles = { 'aria-colcount', 'aria-expanded', 'aria-rowcount' - ] + ], + superclassRole: ['composite', 'table'] }, gridcell: { type: 'widget', @@ -188,40 +210,48 @@ const ariaRoles = { 'aria-rowindex', 'aria-rowspan' ], + superclassRole: ['cell', 'widget'], nameFromContent: true }, group: { type: 'structure', - allowedAttrs: ['aria-activedescendant', 'aria-expanded'] + allowedAttrs: ['aria-activedescendant', 'aria-expanded'], + superclassRole: ['section'] }, heading: { type: 'structure', requiredAttrs: ['aria-level'], allowedAttrs: ['aria-expanded'], + superclassRole: ['sectionhead'], nameFromContent: true }, img: { type: 'structure', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['section'] }, input: { - type: 'abstract' + type: 'abstract', + superclassRole: ['widget'] }, insertion: { type: 'structure' }, landmark: { - type: 'abstract' + type: 'abstract', + superclassRole: ['section'] }, link: { type: 'widget', allowedAttrs: ['aria-expanded'], + superclassRole: ['command'], nameFromContent: true }, list: { type: 'structure', requiredOwned: ['listitem'], - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['section'] }, listbox: { type: 'composite', @@ -233,7 +263,8 @@ const ariaRoles = { 'aria-activedescendant', 'aria-expanded', 'aria-orientation' - ] + ], + superclassRole: ['select'] }, listitem: { type: 'structure', @@ -245,33 +276,48 @@ const ariaRoles = { 'aria-expanded' ], // Note: spec difference + superclassRole: ['section'], nameFromContent: true }, log: { type: 'widget', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['section'] }, main: { type: 'landmark', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['landmark'] }, marquee: { type: 'widget', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['section'] }, math: { type: 'structure', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['section'] }, menu: { type: 'composite', requiredOwned: ['menuitemradio', 'menuitem', 'menuitemcheckbox'], - allowedAttrs: ['aria-activedescendant', 'aria-expanded', 'aria-orientation'] + allowedAttrs: [ + 'aria-activedescendant', + 'aria-expanded', + 'aria-orientation' + ], + superclassRole: ['select'] }, menubar: { type: 'composite', requiredOwned: ['menuitemradio', 'menuitem', 'menuitemcheckbox'], - allowedAttrs: ['aria-activedescendant', 'aria-expanded', 'aria-orientation'] + allowedAttrs: [ + 'aria-activedescendant', + 'aria-expanded', + 'aria-orientation' + ], + superclassRole: ['menu'] }, menuitem: { type: 'widget', @@ -279,6 +325,7 @@ const ariaRoles = { // Note: aria-expanded is not in the 1.1 spec but is // consistently supported in ATs and was added in 1.2 allowedAttrs: ['aria-posinset', 'aria-setsize', 'aria-expanded'], + superclassRole: ['command'], nameFromContent: true }, menuitemcheckbox: { @@ -290,6 +337,7 @@ const ariaRoles = { 'aria-readonly', 'aria-setsize' ], + superclassRole: ['checkbox', 'menuitem'], nameFromContent: true }, menuitemradio: { @@ -301,6 +349,7 @@ const ariaRoles = { 'aria-readonly', 'aria-setsize' ], + superclassRole: ['menuitemcheckbox', 'radio'], nameFromContent: true }, meter: { @@ -310,14 +359,16 @@ const ariaRoles = { }, navigation: { type: 'landmark', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['landmark'] }, none: { type: 'structure' }, note: { type: 'structure', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['section'] }, option: { type: 'widget', @@ -331,13 +382,15 @@ const ariaRoles = { 'aria-posinset', 'aria-setsize' ], + superclassRole: ['input'], nameFromContent: true }, paragraph: { type: 'structure' }, presentation: { - type: 'structure' + type: 'structure', + superclassRole: ['structure'] }, progressbar: { type: 'widget', @@ -347,7 +400,8 @@ const ariaRoles = { 'aria-valuemin', 'aria-valuenow', 'aria-valuetext' - ] + ], + superclassRole: ['range'] }, radio: { type: 'widget', @@ -363,6 +417,7 @@ const ariaRoles = { 'aria-setsize', 'aria-required' ], + superclassRole: ['input'], nameFromContent: true }, radiogroup: { @@ -374,17 +429,21 @@ const ariaRoles = { 'aria-activedescendant', 'aria-expanded', 'aria-orientation' - ] + ], + superclassRole: ['select'] }, range: { - type: 'abstract' + type: 'abstract', + superclassRole: ['widget'] }, region: { type: 'landmark', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['landmark'] }, roletype: { - type: 'abstract' + type: 'abstract', + superclassRole: ['structure', 'widget', 'window'] }, row: { type: 'structure', @@ -398,12 +457,14 @@ const ariaRoles = { 'aria-activedescendant', 'aria-expanded' ], + superclassRole: ['group', 'widget'], nameFromContent: true }, rowgroup: { type: 'structure', requiredContext: ['grid', 'table', 'treegrid'], requiredOwned: ['row'], + superclassRole: ['structure'], nameFromContent: true }, rowheader: { @@ -420,6 +481,7 @@ const ariaRoles = { 'aria-rowspan', 'aria-selected' ], + superclassRole: ['cell', 'gridcell', 'sectionhead'], nameFromContent: true }, scrollbar: { @@ -438,11 +500,13 @@ const ariaRoles = { 'aria-valuemax', 'aria-valuemin', 'aria-valuetext' - ] + ], + superclassRole: ['range'] }, search: { type: 'landmark', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['landmark'] }, searchbox: { type: 'widget', @@ -453,20 +517,24 @@ const ariaRoles = { 'aria-placeholder', 'aria-readonly', 'aria-required' - ] + ], + superclassRole: ['textbox'] }, section: { type: 'abstract', // Note: spec difference + superclassRole: ['structure'], nameFromContent: true }, sectionhead: { type: 'abstract', // Note: spec difference + superclassRole: ['structure'], nameFromContent: true }, select: { - type: 'abstract' + type: 'abstract', + superclassRole: ['composite', 'group'] }, separator: { type: 'structure', @@ -480,7 +548,8 @@ const ariaRoles = { 'aria-valuenow', 'aria-orientation', 'aria-valuetext' - ] + ], + superclassRole: ['structure', 'widget'] }, slider: { type: 'widget', @@ -494,7 +563,8 @@ const ariaRoles = { 'aria-orientation', 'aria-readonly', 'aria-valuetext' - ] + ], + superclassRole: ['input', 'range'] }, spinbutton: { type: 'widget', @@ -509,17 +579,20 @@ const ariaRoles = { 'aria-required', 'aria-activedescendant', 'aria-valuetext' - ] + ], + superclassRole: ['composite', 'input', 'range'] }, status: { type: 'widget', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['section'] }, strong: { type: 'structure' }, structure: { - type: 'abstract' + type: 'abstract', + superclassRole: ['roletype'] }, subscript: { type: 'structure' @@ -531,6 +604,7 @@ const ariaRoles = { type: 'widget', requiredAttrs: ['aria-checked'], allowedAttrs: ['aria-readonly'], + superclassRole: ['checkbox'], nameFromContent: true }, tab: { @@ -542,6 +616,7 @@ const ariaRoles = { 'aria-setsize', 'aria-expanded' ], + superclassRole: ['sectionhead', 'widget'], nameFromContent: true }, table: { @@ -552,6 +627,7 @@ const ariaRoles = { // the accessible text acceptance tests (#139 and #140) require // table be named from content (we even had to special case // table in commons/aria/named-from-contents) + superclassRole: ['section'], nameFromContent: true }, tablist: { @@ -565,16 +641,19 @@ const ariaRoles = { 'aria-orientation', 'aria-activedescendant', 'aria-expanded' - ] + ], + superclassRole: ['composite'] }, tabpanel: { type: 'widget', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['section'] }, term: { type: 'structure', allowedAttrs: ['aria-expanded'], // Note: spec difference + superclassRole: ['section'], nameFromContent: true }, textbox: { @@ -586,22 +665,30 @@ const ariaRoles = { 'aria-placeholder', 'aria-readonly', 'aria-required' - ] + ], + superclassRole: ['input'] }, time: { type: 'structure' }, timer: { type: 'widget', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + superclassRole: ['status'] }, toolbar: { type: 'structure', - allowedAttrs: ['aria-orientation', 'aria-activedescendant', 'aria-expanded'] + allowedAttrs: [ + 'aria-orientation', + 'aria-activedescendant', + 'aria-expanded' + ], + superclassRole: ['group'] }, tooltip: { type: 'structure', allowedAttrs: ['aria-expanded'], + superclassRole: ['section'], nameFromContent: true }, tree: { @@ -613,7 +700,8 @@ const ariaRoles = { 'aria-activedescendant', 'aria-expanded', 'aria-orientation' - ] + ], + superclassRole: ['select'] }, treegrid: { type: 'composite', @@ -628,7 +716,8 @@ const ariaRoles = { 'aria-readonly', 'aria-required', 'aria-rowcount' - ] + ], + superclassRole: ['grid', 'tree'] }, treeitem: { type: 'widget', @@ -641,13 +730,16 @@ const ariaRoles = { 'aria-selected', 'aria-setsize' ], + superclassRole: ['listitem', 'option'], nameFromContent: true }, widget: { - type: 'abstract' + type: 'abstract', + superclassRole: ['roletype'] }, window: { - type: 'abstract' + type: 'abstract', + superclassRole: ['roletype'] } }; From 94dcdb177862d60362801ca77b268273f67e06c9 Mon Sep 17 00:00:00 2001 From: Red Gardner Date: Tue, 27 Oct 2020 16:53:25 -0500 Subject: [PATCH 2/3] feat(standards): add superclassRole to ariaRoles Added superclassRole attributes as an array of strings per WAI-ARIA 1.2 spec Closes issue 2151 --- lib/standards/aria-roles.js | 39 ++++++++++++++++++++++++------------- 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/lib/standards/aria-roles.js b/lib/standards/aria-roles.js index 3efa167de6..b0ce846c53 100644 --- a/lib/standards/aria-roles.js +++ b/lib/standards/aria-roles.js @@ -45,7 +45,8 @@ const ariaRoles = { superclassRole: ['landmark'] }, blockquote: { - type: 'structure' + type: 'structure', + superclassRole: ['section'] }, button: { type: 'widget', @@ -55,7 +56,8 @@ const ariaRoles = { }, caption: { type: 'structure', - requiredContext: ['figure', 'table', 'grid', 'treegrid'] + requiredContext: ['figure', 'table', 'grid', 'treegrid'], + superclassRole: ['section'] }, cell: { type: 'structure', @@ -83,7 +85,8 @@ const ariaRoles = { nameFromContent: true }, code: { - type: 'structure' + type: 'structure', + superclassRole: ['section'] }, columnheader: { type: 'structure', @@ -143,7 +146,8 @@ const ariaRoles = { superclassRole: ['section'] }, deletion: { - type: 'structure' + type: 'structure', + superclassRole: ['section'] }, dialog: { type: 'widget', @@ -163,7 +167,8 @@ const ariaRoles = { superclassRole: ['structure'] }, emphasis: { - type: 'structure' + type: 'structure', + superclassRole: ['section'] }, feed: { type: 'structure', @@ -235,7 +240,8 @@ const ariaRoles = { superclassRole: ['widget'] }, insertion: { - type: 'structure' + type: 'structure', + superclassRole: ['section'] }, landmark: { type: 'abstract', @@ -355,7 +361,8 @@ const ariaRoles = { meter: { type: 'structure', allowedAttrs: ['aria-valuetext'], - requiredAttrs: ['aria-valuemax', 'aria-valuemin', 'aria-valuenow'] + requiredAttrs: ['aria-valuemax', 'aria-valuemin', 'aria-valuenow'], + superclassRole: ['range'] }, navigation: { type: 'landmark', @@ -363,7 +370,8 @@ const ariaRoles = { superclassRole: ['landmark'] }, none: { - type: 'structure' + type: 'structure', + superclassRole: ['section'] }, note: { type: 'structure', @@ -386,7 +394,8 @@ const ariaRoles = { nameFromContent: true }, paragraph: { - type: 'structure' + type: 'structure', + superclassRole: ['section'] }, presentation: { type: 'structure', @@ -588,17 +597,20 @@ const ariaRoles = { superclassRole: ['section'] }, strong: { - type: 'structure' + type: 'structure', + superclassRole: ['section'] }, structure: { type: 'abstract', superclassRole: ['roletype'] }, subscript: { - type: 'structure' + type: 'structure', + superclassRole: ['section'] }, superscript: { - type: 'structure' + type: 'structure', + superclassRole: ['section'] }, switch: { type: 'widget', @@ -669,7 +681,8 @@ const ariaRoles = { superclassRole: ['input'] }, time: { - type: 'structure' + type: 'structure', + superclassRole: ['section'] }, timer: { type: 'widget', From 11feb8194881c1adbb9e6360bc6244535e6774fe Mon Sep 17 00:00:00 2001 From: Red Gardner Date: Wed, 28 Oct 2020 08:56:31 -0500 Subject: [PATCH 3/3] fix(standards) Minor changes from PR feedback Fixed errors that were pointed out in the PR feedback Closes issue 2151 --- lib/standards/aria-roles.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/lib/standards/aria-roles.js b/lib/standards/aria-roles.js index b0ce846c53..e608ab40df 100644 --- a/lib/standards/aria-roles.js +++ b/lib/standards/aria-roles.js @@ -157,8 +157,8 @@ const ariaRoles = { directory: { type: 'structure', allowedAttrs: ['aria-expanded'], - // Note: spec difference superclassRole: ['list'], + // Note: spec difference nameFromContent: true }, document: { @@ -179,8 +179,8 @@ const ariaRoles = { figure: { type: 'structure', allowedAttrs: ['aria-expanded'], - // Note: spec difference superclassRole: ['section'], + // Note: spec difference nameFromContent: true }, form: { @@ -281,8 +281,8 @@ const ariaRoles = { 'aria-setsize', 'aria-expanded' ], - // Note: spec difference superclassRole: ['section'], + // Note: spec difference nameFromContent: true }, log: { @@ -371,7 +371,7 @@ const ariaRoles = { }, none: { type: 'structure', - superclassRole: ['section'] + superclassRole: ['structure'] }, note: { type: 'structure', @@ -452,7 +452,7 @@ const ariaRoles = { }, roletype: { type: 'abstract', - superclassRole: ['structure', 'widget', 'window'] + superclassRole: [] }, row: { type: 'structure', @@ -531,14 +531,14 @@ const ariaRoles = { }, section: { type: 'abstract', - // Note: spec difference superclassRole: ['structure'], + // Note: spec difference nameFromContent: true }, sectionhead: { type: 'abstract', - // Note: spec difference superclassRole: ['structure'], + // Note: spec difference nameFromContent: true }, select: { @@ -664,8 +664,8 @@ const ariaRoles = { term: { type: 'structure', allowedAttrs: ['aria-expanded'], - // Note: spec difference superclassRole: ['section'], + // Note: spec difference nameFromContent: true }, textbox: {