fix(aria-roles): correct abstract roles (types) for aria-roles (#4421)

Too many aria roles were set to widget or otherwise were incorrect,
added a comment source for where I got my information for which abstract
roles were the type of other aria roles

Fix: #4371

Author: gaiety-deque

doc/standards-object.md

@@ -67,9 +67,11 @@ The [`ariaRoles`](../lib/standards/aria-roles.js) object defines valid ARIA role
 
 - `type` - string(required). [The role type](https://www.w3.org/TR/wai-aria-1.1/#roles_categorization). Valid types are:
   - `abstract`
-  - `widget`
-  - `structure`
+  - `composite`
   - `landmark`
+  - `structure`
+  - `widget`
+  - `window`
 - `requiredContext` - array(optional). List of required parent roles.
 - `requiredOwned` - array(optional). List of required owned roles.
 - `requiredAttrs` - array(optional). List of required attributes.

lib/checks/aria/valid-scrollable-semantics-evaluate.js

@@ -16,16 +16,21 @@ const VALID_TAG_NAMES_FOR_SCROLLABLE_REGIONS = {
  * appropriate for scrollable elements found in the focus order.
  */
 const VALID_ROLES_FOR_SCROLLABLE_REGIONS = {
+  alert: true,
+  alertdialog: true,
   application: true,
   article: true,
   banner: false,
   complementary: true,
   contentinfo: true,
+  dialog: true,
   form: true,
+  log: true,
   main: true,
   navigation: true,
   region: true,
-  search: false
+  search: false,
+  status: true
 };
 
 /**

lib/standards/aria-roles.js

@@ -1,4 +1,5 @@
 // Source: https://www.w3.org/TR/wai-aria-1.1/#roles
+// Source for abstract roles (types): https://www.w3.org/TR/wai-aria/#abstract_roles
 
 /* easiest way to see allowed roles is to filter out the global ones
    from the list of inherited states and properties. The dpub spec
@@ -17,13 +18,13 @@
 */
 const ariaRoles = {
   alert: {
-    type: 'widget',
+    type: 'structure',
     // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section']
   },
   alertdialog: {
-    type: 'widget',
+    type: 'window',
     // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded', 'aria-modal'],
     superclassRole: ['alert', 'dialog'],
@@ -119,6 +120,7 @@ const ariaRoles = {
     nameFromContent: true
   },
   combobox: {
+    // Note: spec difference
     type: 'widget',
     requiredAttrs: ['aria-expanded', 'aria-controls'],
     allowedAttrs: [
@@ -169,7 +171,7 @@ const ariaRoles = {
     prohibitedAttrs: ['aria-label', 'aria-labelledby']
   },
   dialog: {
-    type: 'widget',
+    type: 'window',
     // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded', 'aria-modal'],
     superclassRole: ['window'],
@@ -301,6 +303,7 @@ const ariaRoles = {
     superclassRole: ['section']
   },
   listbox: {
+    // Note: spec difference
     type: 'widget',
     requiredOwned: ['group', 'option'],
     allowedAttrs: [
@@ -328,7 +331,7 @@ const ariaRoles = {
     nameFromContent: true
   },
   log: {
-    type: 'widget',
+    type: 'structure',
     // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section']
@@ -340,7 +343,7 @@ const ariaRoles = {
     superclassRole: ['landmark']
   },
   marquee: {
-    type: 'widget',
+    type: 'structure',
     // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section']
@@ -696,7 +699,7 @@ const ariaRoles = {
     accessibleNameRequired: true
   },
   status: {
-    type: 'widget',
+    type: 'structure',
     // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['section']
@@ -816,7 +819,7 @@ const ariaRoles = {
     superclassRole: ['section']
   },
   timer: {
-    type: 'widget',
+    type: 'structure',
     // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['status']

test/checks/aria/valid-scrollable-semantics.js

@@ -106,6 +106,18 @@ describe('valid-scrollable-semantics', function () {
     );
   });
 
+  it('should return true for role=alertdialog', function () {
+    var node = document.createElement('div');
+    node.setAttribute('role', 'alertdialog');
+    fixture.appendChild(node);
+    flatTreeSetup(fixture);
+    assert.isTrue(
+      axe.testUtils
+        .getCheckEvaluate('valid-scrollable-semantics')
+        .call(checkContext, node)
+    );
+  });
+
   it('should return true for role=article', function () {
     var node = document.createElement('div');
     node.setAttribute('role', 'article');
@@ -118,6 +130,18 @@ describe('valid-scrollable-semantics', function () {
     );
   });
 
+  it('should return true for role=dialog', function () {
+    var node = document.createElement('div');
+    node.setAttribute('role', 'dialog');
+    fixture.appendChild(node);
+    flatTreeSetup(fixture);
+    assert.isTrue(
+      axe.testUtils
+        .getCheckEvaluate('valid-scrollable-semantics')
+        .call(checkContext, node)
+    );
+  });
+
   it('should return true for nav elements', function () {
     var node = document.createElement('nav');
     fixture.appendChild(node);

test/integration/rules/focus-order-semantics/focus-order-semantics.html

@@ -19,6 +19,8 @@ <h4>Invalid landmark roles for scrollable containers</h4>
     <div>
       <div id="violation3" role="banner" tabindex="0"></div>
       <div id="violation4" role="search" tabindex="0"></div>
+      <div id="violation5" role="marquee" tabindex="0"></div>
+      <div id="violation6" role="timer" tabindex="0"></div>
     </div>
     <h4>Valid landmark roles for scrollable containers</h4>
     <div>
@@ -31,6 +33,14 @@ <h4>Valid landmark roles for scrollable containers</h4>
       <div id="pass8" role="application" tabindex="0"></div>
       <div id="pass9" role="tooltip" tabindex="0"></div>
       <div id="pass10" role="article" tabindex="0"></div>
+      <div id="pass11" role="alert" tabindex="0"></div>
+      <div id="pass12" role="log" tabindex="0"></div>
+      <div id="pass13" role="status" tabindex="0"></div>
+    </div>
+    <h4>Valid window roles for scrollable containers</h4>
+    <div>
+      <div id="pass14" role="alertdialog" tabindex="0"></div>
+      <div id="pass15" role="dialog" tabindex="0"></div>
     </div>
     <h4>
       Valid scrollable HTML tags for scrollable regions, not selected by this

test/integration/rules/focus-order-semantics/focus-order-semantics.json

@@ -11,12 +11,19 @@
     ["#pass7"],
     ["#pass8"],
     ["#pass9"],
-    ["#pass10"]
+    ["#pass10"],
+    ["#pass11"],
+    ["#pass12"],
+    ["#pass13"],
+    ["#pass14"],
+    ["#pass15"]
   ],
   "violations": [
     ["#violation1"],
     ["#violation2"],
     ["#violation3"],
-    ["#violation4"]
+    ["#violation4"],
+    ["#violation5"],
+    ["#violation6"]
   ]
 }

test/integration/rules/target-size/target-size.html

@@ -28,6 +28,41 @@
   </textarea>
 </p>
 
+<div>
+  <button id="pass9">x</button>
+  <div role="alertdialog" tabindex="0" id="ignore1">Cookies</div>
+</div>
+
+<div>
+  <button id="pass10">x</button>
+  <div role="dialog" tabindex="0" id="ignore2">Cookies</div>
+</div>
+
+<div>
+  <button id="pass11">x</button>
+  <div role="alert" tabindex="0" id="ignore3">Cookies</div>
+</div>
+
+<div>
+  <button id="pass12">x</button>
+  <div role="log" tabindex="0" id="ignore4">Log</div>
+</div>
+
+<div>
+  <button id="pass13">x</button>
+  <div role="marquee" tabindex="0" id="ignore4">Marquee</div>
+</div>
+
+<div>
+  <button id="pass14">x</button>
+  <div role="status" tabindex="0" id="ignore5">Status</div>
+</div>
+
+<div>
+  <button id="pass15">x</button>
+  <div role="timer" tabindex="0" id="ignore6">Timer</div>
+</div>
+
 <!-- Nested controls-->
 <p>
   <a

test/integration/rules/target-size/target-size.json

@@ -20,6 +20,13 @@
     ["#pass6"],
     ["#pass7"],
     ["#pass8"],
+    ["#pass9"],
+    ["#pass10"],
+    ["#pass11"],
+    ["#pass12"],
+    ["#pass13"],
+    ["#pass14"],
+    ["#pass15"],
     ["#pass-adjacent"],
     ["#pass-fixed"]
   ],