fix(aria-allowed-attr): error when generic elements use aria-label and aria-labelledy

lib/checks/aria/aria-prohibited-attr-evaluate.js

@@ -27,12 +27,9 @@ import standards from '../../standards';
  */
 function ariaProhibitedAttrEvaluate(node, options, virtualNode) {
   const prohibited = [];
-  const role = getRole(virtualNode);
-
-  if (!role) {
-    return false;
-  }
 
+  // From Scott O'Hara on asking about HTML elements with no role mapping: no mapping = generic
+  const role = getRole(virtualNode) || 'generic';
   const attrs = virtualNode.attrNames;
   const prohibitedAttrs = standards.ariaRoles[role].prohibitedAttrs;
 

lib/standards/aria-roles.js

@@ -202,6 +202,10 @@ const ariaRoles = {
     allowedAttrs: ['aria-expanded'],
     superclassRole: ['landmark']
   },
+  generic: {
+    type: 'structure',
+    prohibitedAttrs: ['aria-label', 'aria-labelledby']
+  },
   grid: {
     type: 'composite',
     requiredOwned: ['rowgroup', 'row'],

test/checks/aria/aria-prohibited-attr.js

@@ -1,4 +1,4 @@
-describe.only('aria-prohibited-attr', function() {
+describe('aria-prohibited-attr', function() {
   'use strict';
 
   var checkContext = axe.testUtils.MockCheckContext();
@@ -30,16 +30,23 @@ describe.only('aria-prohibited-attr', function() {
     ]);
   });
 
+  it('should return true if element has no role', function() {
+    var params = checkSetup(
+      '<div id="target" aria-label="foo" aria-labelledby="foo">Contents</div>'
+    );
+    assert.isTrue(checkEvaluate.apply(checkContext, params));
+  });
+
   it('should return false if all attributes are allowed', function() {
     var params = checkSetup(
       '<div id="target" role="button" aria-label="foo" aria-labelledby="foo">Contents</div>'
     );
     assert.isFalse(checkEvaluate.apply(checkContext, params));
   });
 
-  it('should return false if element has no role', function() {
+  it('should return false if no prohibited attributes are used', function() {
     var params = checkSetup(
-      '<div id="target" aria-label="foo" aria-labelledby="foo">Contents</div>'
+      '<div id="target" role="code" aria-selected="true">Contents</div>'
     );
     assert.isFalse(checkEvaluate.apply(checkContext, params));
   });

test/commons/standards/get-aria-roles-by-type.js

@@ -1,59 +1,32 @@
 describe('standards.getAriaRolesByType', function() {
   var getAriaRolesByType = axe.commons.standards.getAriaRolesByType;
 
-  before(function() {
-    axe._load({});
-  });
+  it('should return a list of role names by type', function() {
+    // first remove all role types
+    var roleNames = Object.keys(axe._audit.standards.ariaRoles);
+    var ariaRoles = {};
+    for (var i = 0; i < roleNames.length; i++) {
+      ariaRoles[roleNames[i]] = { type: 'off' };
+    }
 
-  after(function() {
-    axe.reset();
-  });
+    // then turn on a few specific roles
+    ariaRoles.article = { type: 'structure' };
+    ariaRoles.blockquote = { type: 'structure' };
+    ariaRoles.caption = { type: 'structure' };
+    ariaRoles.cell = { type: 'structure' };
+
+    axe.configure({
+      standards: {
+        ariaRoles: ariaRoles
+      }
+    });
 
-  it('should return a list of role names by type', function() {
-    // Source: https://www.w3.org/TR/wai-aria-1.1/#document_structure_roles
     var structureRoles = getAriaRolesByType('structure');
     assert.deepEqual(structureRoles, [
       'article',
       'blockquote',
       'caption',
-      'cell',
-      'code',
-      'columnheader',
-      'definition',
-      'deletion',
-      'directory',
-      'document',
-      'emphasis',
-      'feed',
-      'figure',
-      'group',
-      'heading',
-      'img',
-      'insertion',
-      'list',
-      'listitem',
-      'math',
-      'meter',
-      'none',
-      'note',
-      'paragraph',
-      'presentation',
-      'row',
-      'rowgroup',
-      'rowheader',
-      'separator',
-      'strong',
-      'subscript',
-      'superscript',
-      'table',
-      'term',
-      'text',
-      'time',
-      'toolbar',
-      'tooltip',
-      'graphics-document',
-      'graphics-object',
-      'graphics-symbol'
+      'cell'
     ]);
   });
 

test/commons/standards/get-aria-roles-supporting-name-from-content.js

@@ -2,55 +2,32 @@ describe('standards.getAriaRolesSupportingNameFromContent', function() {
   var getAriaRolesSupportingNameFromContent =
     axe.commons.standards.getAriaRolesSupportingNameFromContent;
 
-  before(function() {
-    axe._load({});
-  });
+  it('should return a list of role names which are named from content', function() {
+    // first remove all namedFromContent
+    var roleNames = Object.keys(axe._audit.standards.ariaRoles);
+    var ariaRoles = {};
+    for (var i = 0; i < roleNames.length; i++) {
+      ariaRoles[roleNames[i]] = { nameFromContent: false };
+    }
 
-  after(function() {
-    axe.reset();
-  });
+    // then turn on a few specific roles
+    ariaRoles.button = { nameFromContent: true };
+    ariaRoles.cell = { nameFromContent: true };
+    ariaRoles.checkbox = { nameFromContent: true };
+    ariaRoles.columnheader = { nameFromContent: true };
+
+    axe.configure({
+      standards: {
+        ariaRoles: ariaRoles
+      }
+    });
 
-  it('should return a list of role names which are named from content', function() {
-    // Source: https://www.w3.org/TR/wai-aria-1.1/#namefromcontent
-    // Source: https://www.w3.org/TR/dpub-aria-1.0/
-    // Note: we have added roles in our spec. also note that
-    // although "tree" is listed as supporting name from content
-    // it's role definition does not list contents in the name from
-    // section (it was removed from the list in WAI ARIA 1.2)
     var contentRoles = getAriaRolesSupportingNameFromContent();
     assert.deepEqual(contentRoles, [
       'button',
       'cell',
       'checkbox',
-      'columnheader',
-      'directory',
-      'figure',
-      'gridcell',
-      'heading',
-      'link',
-      'listitem',
-      'menuitem',
-      'menuitemcheckbox',
-      'menuitemradio',
-      'option',
-      'radio',
-      'row',
-      'rowgroup',
-      'rowheader',
-      'section',
-      'sectionhead',
-      'switch',
-      'tab',
-      'table',
-      'term',
-      'text',
-      'tooltip',
-      'treeitem',
-      'doc-backlink',
-      'doc-biblioref',
-      'doc-glossref',
-      'doc-noteref',
-      'graphics-object'
+      'columnheader'
     ]);
   });
 

test/integration/rules/aria-allowed-attr/failures.html

@@ -20,4 +20,6 @@
 <div role="subscript" aria-labelledby="value" id="fail20">fail</div>
 <div role="superscript" aria-label="value" id="fail21">fail</div>
 <div role="superscript" aria-labelledby="value" id="fail22">fail</div>
+<div aria-label="value" id="fail23">fail</div>
+<div aria-labelledby="value" id="fail24">fail</div>
 <!-- technically presentation and none roles do not allow aria-label and aria-labelledby, but since those are global attributes the presentation role conflict will not resolve the roles to none or presentation -->

test/integration/rules/aria-allowed-attr/failures.json

@@ -23,6 +23,8 @@
     ["#fail19"],
     ["#fail20"],
     ["#fail21"],
-    ["#fail22"]
+    ["#fail22"],
+    ["#fail23"],
+    ["#fail24"]
   ]
 }