From 277d02893436af3ecdc6bc7eec4d13bec884316f Mon Sep 17 00:00:00 2001 From: Steven Lambert Date: Tue, 15 Sep 2020 09:21:29 -0600 Subject: [PATCH 1/3] chore: update roles with interactive info --- lib/standards/aria-roles.js | 84 +++++++++++++++++++++++++++---------- 1 file changed, 62 insertions(+), 22 deletions(-) diff --git a/lib/standards/aria-roles.js b/lib/standards/aria-roles.js index 17383e4049..a5bcf50681 100644 --- a/lib/standards/aria-roles.js +++ b/lib/standards/aria-roles.js @@ -42,7 +42,9 @@ const ariaRoles = { button: { type: 'widget', allowedAttrs: ['aria-expanded', 'aria-pressed'], - nameFromContent: true + nameFromContent: true, + interactive: true, + interactiveDescendant: false }, cell: { type: 'structure', @@ -65,7 +67,9 @@ 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'], - nameFromContent: true + nameFromContent: true, + contentTypes: ['interactive'], + interactiveDescendant: false }, columnheader: { type: 'structure', @@ -97,7 +101,8 @@ const ariaRoles = { 'aria-required', 'aria-activedescendant', 'aria-orientation' - ] + ], + interactive: true }, command: { type: 'abstract' @@ -157,7 +162,8 @@ const ariaRoles = { 'aria-colcount', 'aria-expanded', 'aria-rowcount' - ] + ], + interactive: true }, gridcell: { type: 'widget', @@ -172,7 +178,8 @@ const ariaRoles = { 'aria-rowindex', 'aria-rowspan' ], - nameFromContent: true + nameFromContent: true, + interactive: true }, group: { type: 'structure', @@ -214,7 +221,8 @@ const ariaRoles = { 'aria-activedescendant', 'aria-expanded', 'aria-orientation' - ] + ], + interactive: true }, listitem: { type: 'structure', @@ -247,12 +255,22 @@ const ariaRoles = { menu: { type: 'composite', requiredOwned: ['menuitemradio', 'menuitem', 'menuitemcheckbox'], - allowedAttrs: ['aria-activedescendant', 'aria-expanded', 'aria-orientation'] + allowedAttrs: [ + 'aria-activedescendant', + 'aria-expanded', + 'aria-orientation' + ], + interactive: true }, menubar: { type: 'composite', requiredOwned: ['menuitemradio', 'menuitem', 'menuitemcheckbox'], - allowedAttrs: ['aria-activedescendant', 'aria-expanded', 'aria-orientation'] + allowedAttrs: [ + 'aria-activedescendant', + 'aria-expanded', + 'aria-orientation' + ], + interactive: true }, menuitem: { type: 'widget', @@ -260,7 +278,9 @@ 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'], - nameFromContent: true + nameFromContent: true, + interactive: true, + interactiveDescendant: false }, menuitemcheckbox: { type: 'widget', @@ -271,7 +291,9 @@ const ariaRoles = { 'aria-readonly', 'aria-setsize' ], - nameFromContent: true + nameFromContent: true, + interactive: true, + interactiveDescendant: false }, menuitemradio: { type: 'widget', @@ -282,7 +304,9 @@ const ariaRoles = { 'aria-readonly', 'aria-setsize' ], - nameFromContent: true + nameFromContent: true, + interactive: true, + interactiveDescendant: false }, navigation: { type: 'landmark', @@ -307,7 +331,9 @@ const ariaRoles = { 'aria-posinset', 'aria-setsize' ], - nameFromContent: true + nameFromContent: true, + interactive: true, + interactiveDescendant: false }, presentation: { type: 'structure' @@ -336,7 +362,9 @@ const ariaRoles = { 'aria-setsize', 'aria-required' ], - nameFromContent: true + nameFromContent: true, + interactive: true, + interactiveDescendant: false }, radiogroup: { type: 'composite', @@ -411,7 +439,8 @@ const ariaRoles = { 'aria-valuemax', 'aria-valuemin', 'aria-valuetext' - ] + ], + interactive: true }, search: { type: 'landmark', @@ -426,7 +455,9 @@ const ariaRoles = { 'aria-placeholder', 'aria-readonly', 'aria-required' - ] + ], + interactive: true, + interactiveDescendant: false }, section: { type: 'abstract', @@ -453,7 +484,8 @@ const ariaRoles = { 'aria-valuenow', 'aria-orientation', 'aria-valuetext' - ] + ], + interactive: true }, slider: { type: 'widget', @@ -467,7 +499,8 @@ const ariaRoles = { 'aria-orientation', 'aria-readonly', 'aria-valuetext' - ] + ], + interactive: true }, spinbutton: { type: 'widget', @@ -482,7 +515,8 @@ const ariaRoles = { 'aria-required', 'aria-activedescendant', 'aria-valuetext' - ] + ], + interactive: true }, status: { type: 'widget', @@ -495,7 +529,9 @@ const ariaRoles = { type: 'widget', requiredAttrs: ['aria-checked'], allowedAttrs: ['aria-readonly'], - nameFromContent: true + nameFromContent: true, + interactive: true, + interactiveDescendant: false }, tab: { type: 'widget', @@ -506,7 +542,8 @@ const ariaRoles = { 'aria-setsize', 'aria-expanded' ], - nameFromContent: true + nameFromContent: true, + interactive: true }, table: { type: 'structure', @@ -550,7 +587,9 @@ const ariaRoles = { 'aria-placeholder', 'aria-readonly', 'aria-required' - ] + ], + interactive: true, + interactiveDescendant: false }, timer: { type: 'widget', @@ -602,7 +641,8 @@ const ariaRoles = { 'aria-selected', 'aria-setsize' ], - nameFromContent: true + nameFromContent: true, + interactive: true }, widget: { type: 'abstract' From 60a296850c7a6d39cd1bcf9031a260d7e7e125ca Mon Sep 17 00:00:00 2001 From: Steven Lambert Date: Tue, 15 Sep 2020 09:39:46 -0600 Subject: [PATCH 2/3] fix --- lib/standards/aria-roles.js | 178 +++++++++++++++++++++++------------- 1 file changed, 113 insertions(+), 65 deletions(-) diff --git a/lib/standards/aria-roles.js b/lib/standards/aria-roles.js index a5bcf50681..e8b1a56c14 100644 --- a/lib/standards/aria-roles.js +++ b/lib/standards/aria-roles.js @@ -18,32 +18,37 @@ const ariaRoles = { alert: { type: 'widget', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, alertdialog: { type: 'widget', - allowedAttrs: ['aria-expanded', 'aria-modal'] + allowedAttrs: ['aria-expanded', 'aria-modal'], + contentTypes: ['flow'] }, 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'], + contentTypes: ['flow'] }, article: { type: 'structure', - allowedAttrs: ['aria-posinset', 'aria-setsize', 'aria-expanded'] + allowedAttrs: ['aria-posinset', 'aria-setsize', 'aria-expanded'], + contentTypes: ['flow'] }, banner: { type: 'landmark', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['document'] }, button: { type: 'widget', allowedAttrs: ['aria-expanded', 'aria-pressed'], nameFromContent: true, - interactive: true, + contentTypes: ['interactive'], interactiveDescendant: false }, cell: { @@ -56,7 +61,8 @@ const ariaRoles = { 'aria-rowspan', 'aria-expanded' ], - nameFromContent: true + nameFromContent: true, + contentTypes: ['flow'] }, checkbox: { type: 'widget', @@ -85,7 +91,8 @@ const ariaRoles = { 'aria-rowspan', 'aria-selected' ], - nameFromContent: true + nameFromContent: true, + contentTypes: ['flow'] }, combobox: { type: 'composite', @@ -102,54 +109,63 @@ const ariaRoles = { 'aria-activedescendant', 'aria-orientation' ], - interactive: true + contentTypes: ['interactive'] }, command: { type: 'abstract' }, complementary: { type: 'landmark', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, composite: { type: 'abstract' }, contentinfo: { type: 'landmark', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, definition: { type: 'structure', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['phrasing'] }, dialog: { type: 'widget', - allowedAttrs: ['aria-expanded', 'aria-modal'] + allowedAttrs: ['aria-expanded', 'aria-modal'], + contentTypes: ['flow'] }, directory: { type: 'structure', allowedAttrs: ['aria-expanded'], // Note: spec difference - nameFromContent: true + nameFromContent: true, + contentTypes: ['flow'] }, document: { type: 'structure', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, feed: { type: 'structure', requiredOwned: ['article'], - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, figure: { type: 'structure', allowedAttrs: ['aria-expanded'], // Note: spec difference - nameFromContent: true + nameFromContent: true, + contentTypes: ['flow'] }, form: { type: 'landmark', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, grid: { type: 'composite', @@ -163,7 +179,7 @@ const ariaRoles = { 'aria-expanded', 'aria-rowcount' ], - interactive: true + contentTypes: ['flow', 'interactive'] }, gridcell: { type: 'widget', @@ -179,21 +195,24 @@ const ariaRoles = { 'aria-rowspan' ], nameFromContent: true, - interactive: true + contentTypes: ['flow', 'interactive'] }, group: { type: 'structure', - allowedAttrs: ['aria-activedescendant', 'aria-expanded'] + allowedAttrs: ['aria-activedescendant', 'aria-expanded'], + contentTypes: ['flow'] }, heading: { type: 'structure', requiredAttrs: ['aria-level'], allowedAttrs: ['aria-expanded'], - nameFromContent: true + nameFromContent: true, + contentTypes: ['heading'] }, img: { type: 'structure', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, input: { type: 'abstract' @@ -204,12 +223,14 @@ const ariaRoles = { link: { type: 'widget', allowedAttrs: ['aria-expanded'], - nameFromContent: true + nameFromContent: true, + contentTypes: ['flow'] }, list: { type: 'structure', requiredOwned: ['listitem'], - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, listbox: { type: 'composite', @@ -222,7 +243,7 @@ const ariaRoles = { 'aria-expanded', 'aria-orientation' ], - interactive: true + contentTypes: ['flow', 'interactive'] }, listitem: { type: 'structure', @@ -234,23 +255,28 @@ const ariaRoles = { 'aria-expanded' ], // Note: spec difference - nameFromContent: true + nameFromContent: true, + contentTypes: ['flow'] }, log: { type: 'widget', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, main: { type: 'landmark', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, marquee: { type: 'widget', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, math: { type: 'structure', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, menu: { type: 'composite', @@ -260,7 +286,7 @@ const ariaRoles = { 'aria-expanded', 'aria-orientation' ], - interactive: true + contentTypes: ['flow', 'interactive'] }, menubar: { type: 'composite', @@ -270,7 +296,7 @@ const ariaRoles = { 'aria-expanded', 'aria-orientation' ], - interactive: true + contentTypes: ['flow', 'interactive'] }, menuitem: { type: 'widget', @@ -279,7 +305,7 @@ const ariaRoles = { // consistently supported in ATs and was added in 1.2 allowedAttrs: ['aria-posinset', 'aria-setsize', 'aria-expanded'], nameFromContent: true, - interactive: true, + contentTypes: ['interactive'], interactiveDescendant: false }, menuitemcheckbox: { @@ -292,7 +318,7 @@ const ariaRoles = { 'aria-setsize' ], nameFromContent: true, - interactive: true, + contentTypes: ['interactive'], interactiveDescendant: false }, menuitemradio: { @@ -305,19 +331,22 @@ const ariaRoles = { 'aria-setsize' ], nameFromContent: true, - interactive: true, + contentTypes: ['interactive'], interactiveDescendant: false }, navigation: { type: 'landmark', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, none: { - type: 'structure' + type: 'structure', + contentTypes: ['flow'] }, note: { type: 'structure', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, option: { type: 'widget', @@ -332,11 +361,12 @@ const ariaRoles = { 'aria-setsize' ], nameFromContent: true, - interactive: true, + contentTypes: ['interactive'], interactiveDescendant: false }, presentation: { - type: 'structure' + type: 'structure', + contentTypes: ['flow'] }, progressbar: { type: 'widget', @@ -346,7 +376,8 @@ const ariaRoles = { 'aria-valuemin', 'aria-valuenow', 'aria-valuetext' - ] + ], + contentTypes: ['flow'] }, radio: { type: 'widget', @@ -363,7 +394,7 @@ const ariaRoles = { 'aria-required' ], nameFromContent: true, - interactive: true, + contentTypes: ['interactive'], interactiveDescendant: false }, radiogroup: { @@ -375,14 +406,16 @@ const ariaRoles = { 'aria-activedescendant', 'aria-expanded', 'aria-orientation' - ] + ], + contentTypes: ['flow'] }, range: { type: 'abstract' }, region: { type: 'landmark', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, roletype: { type: 'abstract' @@ -440,11 +473,12 @@ const ariaRoles = { 'aria-valuemin', 'aria-valuetext' ], - interactive: true + contentTypes: ['flow', 'interactive'] }, search: { type: 'landmark', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, searchbox: { type: 'widget', @@ -456,7 +490,7 @@ const ariaRoles = { 'aria-readonly', 'aria-required' ], - interactive: true, + contentTypes: ['interactive'], interactiveDescendant: false }, section: { @@ -485,7 +519,7 @@ const ariaRoles = { 'aria-orientation', 'aria-valuetext' ], - interactive: true + contentTypes: ['interactive'] }, slider: { type: 'widget', @@ -500,7 +534,7 @@ const ariaRoles = { 'aria-readonly', 'aria-valuetext' ], - interactive: true + contentTypes: ['interactive'] }, spinbutton: { type: 'widget', @@ -516,11 +550,12 @@ const ariaRoles = { 'aria-activedescendant', 'aria-valuetext' ], - interactive: true + contentTypes: ['flow', 'interactive'] }, status: { type: 'widget', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, structure: { type: 'abstract' @@ -530,7 +565,7 @@ const ariaRoles = { requiredAttrs: ['aria-checked'], allowedAttrs: ['aria-readonly'], nameFromContent: true, - interactive: true, + contentTypes: ['interactive'], interactiveDescendant: false }, tab: { @@ -543,7 +578,7 @@ const ariaRoles = { 'aria-expanded' ], nameFromContent: true, - interactive: true + contentTypes: ['interactive'] }, table: { type: 'structure', @@ -553,7 +588,8 @@ 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) - nameFromContent: true + nameFromContent: true, + contentTypes: ['flow'] }, tablist: { type: 'composite', @@ -566,17 +602,20 @@ const ariaRoles = { 'aria-orientation', 'aria-activedescendant', 'aria-expanded' - ] + ], + contentTypes: ['flow'] }, tabpanel: { type: 'widget', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, term: { type: 'structure', allowedAttrs: ['aria-expanded'], // Note: spec difference - nameFromContent: true + nameFromContent: true, + contentTypes: ['phrasing'] }, textbox: { type: 'widget', @@ -588,21 +627,28 @@ const ariaRoles = { 'aria-readonly', 'aria-required' ], - interactive: true, + contentTypes: ['interactive'], interactiveDescendant: false }, timer: { type: 'widget', - allowedAttrs: ['aria-expanded'] + allowedAttrs: ['aria-expanded'], + contentTypes: ['flow'] }, toolbar: { type: 'structure', - allowedAttrs: ['aria-orientation', 'aria-activedescendant', 'aria-expanded'] + allowedAttrs: [ + 'aria-orientation', + 'aria-activedescendant', + 'aria-expanded' + ], + contentTypes: ['flow'] }, tooltip: { type: 'structure', allowedAttrs: ['aria-expanded'], - nameFromContent: true + nameFromContent: true, + contentTypes: ['flow'] }, tree: { type: 'composite', @@ -613,7 +659,8 @@ const ariaRoles = { 'aria-activedescendant', 'aria-expanded', 'aria-orientation' - ] + ], + contentTypes: ['flow'] }, treegrid: { type: 'composite', @@ -628,7 +675,8 @@ const ariaRoles = { 'aria-readonly', 'aria-required', 'aria-rowcount' - ] + ], + contentTypes: ['flow'] }, treeitem: { type: 'widget', @@ -642,7 +690,7 @@ const ariaRoles = { 'aria-setsize' ], nameFromContent: true, - interactive: true + contentTypes: ['interactive'] }, widget: { type: 'abstract' From eea501caf7fbe80f13f3bbbabcb28ba875609d56 Mon Sep 17 00:00:00 2001 From: Steven Lambert Date: Tue, 15 Sep 2020 10:51:48 -0600 Subject: [PATCH 3/3] docs --- doc/standards-object.md | 7 +++++++ test/playground.html | 5 ++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/doc/standards-object.md b/doc/standards-object.md index 1cd18e2cf9..93e316fd28 100644 --- a/doc/standards-object.md +++ b/doc/standards-object.md @@ -74,6 +74,13 @@ The [`ariaRoles`](../lib/standards/aria-roles.js) object defines valid ARIA role - `allowedAttrs` - array(optional). List of allowed attributes (besides any required and global ARIA attributes). - `nameFromContent` - boolean(optional. Default `false`). If the role allows name from content when calculating the accessible name. - `unsupported` - boolean(optional. Default `false`). If the role role is unsupported. Use this property to disable a role. +- `contentTypes` - array(optional). List of [content types](https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties) for the role. Valid values are: + - `flow` + - `document` + - `heading` + - `phrasing` + - `interactive` +- `interactiveDescendant` - boolean(optional. Default `true`). If the role is allowed to have interactive descendants. ### Dpub Roles diff --git a/test/playground.html b/test/playground.html index 4a31de5eef..cc1e27d419 100644 --- a/test/playground.html +++ b/test/playground.html @@ -2,7 +2,10 @@ O hai -
foo
+
+ Hello +
Goodbye
+