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

lib/rules/widget-not-inline-matches.js

@@ -18,7 +18,8 @@ const matchesFns = [
 ];
 
 function isWidgetType(vNode) {
-  return getRoleType(vNode) === 'widget';
+  const roleType = getRoleType(vNode);
+  return roleType === 'widget' || roleType === 'composite';
 }
 
 function isNotAreaElement(vNode) {

lib/standards/aria-roles.js

@@ -1,4 +1,5 @@
 // Source: https://www.w3.org/TR/wai-aria-1.1/#roles
+// Source for abstract roles: https://www.w3.org/TR/wai-aria/#abstract_roles and https://www.w3.org/WAI/ARIA/1.2/class-diagram/rdf_model.svg
 
 /* 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,21 +18,21 @@
 */
 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'],
     accessibleNameRequired: true
   },
   application: {
     // Note: spec difference
-    type: 'landmark',
+    type: 'structure',
     // 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'],
@@ -119,7 +120,7 @@ const ariaRoles = {
     nameFromContent: true
   },
   combobox: {
-    type: 'widget',
+    type: 'composite',
     requiredAttrs: ['aria-expanded', 'aria-controls'],
     allowedAttrs: [
       'aria-owns',
@@ -169,7 +170,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,7 +302,7 @@ const ariaRoles = {
     superclassRole: ['section']
   },
   listbox: {
-    type: 'widget',
+    type: 'composite',
     requiredOwned: ['group', 'option'],
     allowedAttrs: [
       'aria-multiselectable',
@@ -328,7 +329,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 +341,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 +697,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 +817,7 @@ const ariaRoles = {
     superclassRole: ['section']
   },
   timer: {
-    type: 'widget',
+    type: 'structure',
     // Spec difference: Aria-expanded removed in 1.2
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['status']

test/commons/table/is-data-table.js

@@ -32,6 +32,14 @@ describe('table.isDataTable', function () {
     assert.isFalse(axe.commons.table.isDataTable(node));
   });
 
+  it('should be false if the table has role=application, which is an astract role of structure', function () {
+    fixture.innerHTML = '<table role="application"></table>';
+
+    var node = fixture.querySelector('table');
+    axe.testUtils.flatTreeSetup(fixture.firstChild);
+    assert.isFalse(axe.commons.table.isDataTable(node));
+  });
+
   it('should be true if the table is inside an editable area', function () {
     fixture.innerHTML =
       '<div contenteditable="true">' +
@@ -71,13 +79,6 @@ describe('table.isDataTable', function () {
   });
 
   describe('should be true if the table has a landmark role', function () {
-    it('application', function () {
-      fixture.innerHTML = '<table role="application"></table>';
-
-      var node = fixture.querySelector('table');
-      axe.testUtils.flatTreeSetup(fixture.firstChild);
-      assert.isTrue(axe.commons.table.isDataTable(node));
-    });
     it('banner', function () {
       fixture.innerHTML = '<table role="banner"></table>';