fix(2859) presentation role conflict

doc/standards-object.md

@@ -95,7 +95,7 @@ The [`htmlElms`](../lib/standards/html-elms.js) object defines valid HTML elemen
 
 - `aria-allowed-attr` - Checks if the attribute can be used on the element from the `noAriaAttrs` property.
 - `aria-allowed-role` - Checks if the role can be used on the HTML element from the `allowedRoles` property.
-- `aria-required-attrs` - Checks if any required attrs are defied implicitly on the element from the `implicitAttrs` property.
+- `aria-required-attrs` - Checks if any required attrs are defined implicitly on the element from the `implicitAttrs` property.
 
 ### Structure
 

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

@@ -27,36 +27,40 @@ import standards from '../../standards';
  * @return {Boolean} True if the element uses any prohibited ARIA attributes. False otherwise.
  */
 function ariaProhibitedAttrEvaluate(node, options = {}, virtualNode) {
-  const { elementsAllowedAriaLabel = [] } = options;
-  const prohibitedList = listProhibitedAttrs(virtualNode, elementsAllowedAriaLabel);
-
+  const extraElementsAllowedAriaLabel = options.elementsAllowedAriaLabel || [];
+
+  const prohibitedList = listProhibitedAttrs(
+    virtualNode,
+    extraElementsAllowedAriaLabel
+  );
+
   const prohibited = prohibitedList.filter(attrName => {
     if (!virtualNode.attrNames.includes(attrName)) {
       return false;
     }
-    return sanitize(virtualNode.attr(attrName)) !== ''
+    return sanitize(virtualNode.attr(attrName)) !== '';
   });
 
   if (prohibited.length === 0) {
     return false;
   }
-  
+
   this.data(prohibited);
-  const hasTextContent = sanitize(subtreeText(virtualNode)) !== ''
+  const hasTextContent = sanitize(subtreeText(virtualNode)) !== '';
   // Don't fail if there is text content to announce
   return hasTextContent ? undefined : true;
 }
 
 function listProhibitedAttrs(virtualNode, elementsAllowedAriaLabel) {
-  const role = getRole(virtualNode);
-  const roleSpec = standards.ariaRoles[role]
+  const role = getRole(virtualNode, { chromium: true });
+  const roleSpec = standards.ariaRoles[role];
   if (roleSpec) {
     return roleSpec.prohibitedAttrs || [];
   }
-  
-  const { nodeName } = virtualNode.props
-  if (elementsAllowedAriaLabel.includes(nodeName)) {
-    return []
+
+  const { nodeName } = virtualNode.props;
+  if (!!role || elementsAllowedAriaLabel.includes(nodeName)) {
+    return [];
   }
   return ['aria-label', 'aria-labelledby'];
 }

lib/checks/aria/aria-prohibited-attr.json

@@ -2,20 +2,7 @@
   "id": "aria-prohibited-attr",
   "evaluate": "aria-prohibited-attr-evaluate",
   "options": {
-    "elementsAllowedAriaLabel": [
-      "audio",
-      "applet",
-      "canvas",
-      "dl",
-      "embed",
-      "iframe",
-      "input",
-      "label",
-      "meter",
-      "object",
-      "svg",
-      "video"
-    ]
+    "elementsAllowedAriaLabel": ["applet", "input"]
   },
   "metadata": {
     "impact": "serious",

lib/commons/aria/get-role.js

@@ -82,8 +82,10 @@ function getInheritedRole(vNode, explicitRoleOptions) {
   return getInheritedRole(vNode.parent, explicitRoleOptions);
 }
 
-function resolveImplicitRole(vNode, explicitRoleOptions) {
-  const implicitRole = getImplicitRole(vNode);
+function resolveImplicitRole(vNode, { chromium, ...explicitRoleOptions }) {
+  const implicitRole = getImplicitRole(vNode, {
+    chromium
+  });
 
   if (!implicitRole) {
     return null;
@@ -118,17 +120,17 @@ function hasConflictResolution(vNode) {
  * @returns {string|null} Role or null
  * @deprecated noImplicit option is deprecated. Use aria.getExplicitRole instead.
  */
-function resolveRole(node, { noImplicit, ...explicitRoleOptions } = {}) {
+function resolveRole(node, { noImplicit, ...roleOptions } = {}) {
   const vNode =
     node instanceof AbstractVirtuaNode ? node : getNodeFromTree(node);
   if (vNode.props.nodeType !== 1) {
     return null;
   }
 
-  const explicitRole = getExplicitRole(vNode, explicitRoleOptions);
+  const explicitRole = getExplicitRole(vNode, roleOptions);
 
   if (!explicitRole) {
-    return noImplicit ? null : resolveImplicitRole(vNode, explicitRoleOptions);
+    return noImplicit ? null : resolveImplicitRole(vNode, roleOptions);
   }
 
   if (!['presentation', 'none'].includes(explicitRole)) {
@@ -138,7 +140,7 @@ function resolveRole(node, { noImplicit, ...explicitRoleOptions } = {}) {
   if (hasConflictResolution(vNode)) {
     // return null if there is a conflict resolution but no implicit
     // has been set as the explicit role is not the true role
-    return noImplicit ? null : resolveImplicitRole(vNode, explicitRoleOptions);
+    return noImplicit ? null : resolveImplicitRole(vNode, roleOptions);
   }
 
   // role presentation or none and no conflict resolution
@@ -158,6 +160,7 @@ function resolveRole(node, { noImplicit, ...explicitRoleOptions } = {}) {
  * @param {boolean} options.abstracts  Allow role to be abstract
  * @param {boolean} options.dpub  Allow role to be any (valid) doc-* roles
  * @param {boolean} options.noPresentational return null if role is presentation or none
+ * @param {boolean} options.chromium Include implicit roles from chromium-based browsers in role result
  * @returns {string|null} Role or null
  *
  * @deprecated noImplicit option is deprecated. Use aria.getExplicitRole instead.

lib/commons/aria/implicit-role.js

@@ -1,5 +1,6 @@
 import implicitHtmlRoles from '../standards/implicit-html-roles';
 import { getNodeFromTree } from '../../core/utils';
+import getElementSpec from '../standards/get-element-spec';
 import AbstractVirtuaNode from '../../core/base/virtual-node/abstract-virtual-node';
 
 /**
@@ -10,7 +11,7 @@ import AbstractVirtuaNode from '../../core/base/virtual-node/abstract-virtual-no
  * @param {HTMLElement|VirtualNode} node The node to test
  * @return {Mixed} Either the role or `null` if there is none
  */
-function implicitRole(node) {
+function implicitRole(node, { chromium } = {}) {
   const vNode =
     node instanceof AbstractVirtuaNode ? node : getNodeFromTree(node);
   node = vNode.actualNode;
@@ -25,24 +26,19 @@ function implicitRole(node) {
     );
   }
 
-  // until we have proper implicit role lookups for svgs we will
-  // avoid giving them one
-  if (node && node.namespaceURI === 'http://www.w3.org/2000/svg') {
-    return null;
-  }
-
   const nodeName = vNode.props.nodeName;
   const role = implicitHtmlRoles[nodeName];
 
-  if (!role) {
-    return null;
+  if (!role && chromium) {
+    const { chromiumRole } = getElementSpec(vNode);
+    return chromiumRole || null;
   }
 
   if (typeof role === 'function') {
     return role(vNode);
   }
 
-  return role;
+  return role || null;
 }
 
 export default implicitRole;

lib/commons/aria/index.js

@@ -9,6 +9,7 @@ export { default as arialabelledbyText } from './arialabelledby-text';
 export { default as getAccessibleRefs } from './get-accessible-refs';
 export { default as getElementUnallowedRoles } from './get-element-unallowed-roles';
 export { default as getExplicitRole } from './get-explicit-role';
+export { default as getImplicitRole } from './implicit-role';
 export { default as getOwnedVirtual } from './get-owned-virtual';
 export { default as getRoleType } from './get-role-type';
 export { default as getRole } from './get-role';

lib/core/base/metadata-function-map.js

@@ -14,6 +14,7 @@ import ariaValidAttrEvaluate from '../../checks/aria/aria-valid-attr-evaluate';
 import ariaValidAttrValueEvaluate from '../../checks/aria/aria-valid-attr-value-evaluate';
 import fallbackroleEvaluate from '../../checks/aria/fallbackrole-evaluate';
 import hasGlobalAriaAttributeEvaluate from '../../checks/aria/has-global-aria-attribute-evaluate';
+import hasImplicitChromiumRoleMatches from '../../rules/has-implicit-chromium-role-matches';
 import hasWidgetRoleEvaluate from '../../checks/aria/has-widget-role-evaluate';
 import invalidroleEvaluate from '../../checks/aria/invalidrole-evaluate';
 import isElementFocusableEvaluate from '../../checks/aria/is-element-focusable-evaluate';
@@ -187,6 +188,7 @@ const metadataFunctionMap = {
   'aria-valid-attr-value-evaluate': ariaValidAttrValueEvaluate,
   'fallbackrole-evaluate': fallbackroleEvaluate,
   'has-global-aria-attribute-evaluate': hasGlobalAriaAttributeEvaluate,
+  'has-implicit-chromium-role-matches': hasImplicitChromiumRoleMatches,
   'has-widget-role-evaluate': hasWidgetRoleEvaluate,
   'invalidrole-evaluate': invalidroleEvaluate,
   'is-element-focusable-evaluate': isElementFocusableEvaluate,

lib/rules/has-implicit-chromium-role-matches.js

@@ -0,0 +1,7 @@
+import { getImplicitRole } from '../commons/aria';
+
+function hasImplicitChromiumRoleMatches(node, virtualNode) {
+  return getImplicitRole(virtualNode, { chromium: true }) !== null;
+}
+
+export default hasImplicitChromiumRoleMatches;

lib/rules/presentation-role-conflict-matches.js

@@ -0,0 +1,7 @@
+import { getImplicitRole } from '../commons/aria';
+
+function presentationRoleConflictMatches(node, virtualNode) {
+  return getImplicitRole(virtualNode, { chromiumRoles: true }) !== null;
+}
+
+export default presentationRoleConflictMatches;

lib/rules/presentation-role-conflict.json

@@ -1,5 +1,6 @@
 {
   "id": "presentation-role-conflict",
+  "matches": "has-implicit-chromium-role-matches",
   "selector": "[role=\"none\"], [role=\"presentation\"]",
   "tags": ["cat.aria", "best-practice"],
   "metadata": {

lib/standards/html-elms.js

@@ -93,7 +93,8 @@ const htmlElms = {
     },
     // Note: if the property applies regardless of variants it is
     // placed at the top level instead of the default variant
-    allowedRoles: ['application']
+    allowedRoles: ['application'],
+    chromiumRole: 'Audio'
   },
   b: {
     contentTypes: ['phrasing', 'flow'],
@@ -143,7 +144,8 @@ const htmlElms = {
   },
   canvas: {
     allowedRoles: true,
-    contentTypes: ['embedded', 'phrasing', 'flow']
+    contentTypes: ['embedded', 'phrasing', 'flow'],
+    chromiumRole: 'Canvas'
   },
   caption: {
     allowedRoles: false
@@ -205,7 +207,8 @@ const htmlElms = {
   },
   dl: {
     contentTypes: ['flow'],
-    allowedRoles: ['group', 'list', 'presentation', 'none']
+    allowedRoles: ['group', 'list', 'presentation', 'none'],
+    chromiumRole: 'DescriptionList'
   },
   dt: {
     allowedRoles: ['listitem']
@@ -216,7 +219,8 @@ const htmlElms = {
   },
   embed: {
     contentTypes: ['interactive', 'embedded', 'phrasing', 'flow'],
-    allowedRoles: ['application', 'document', 'img', 'presentation', 'none']
+    allowedRoles: ['application', 'document', 'img', 'presentation', 'none'],
+    chromiumRole: 'EmbeddedObject'
   },
   fieldset: {
     contentTypes: ['flow'],
@@ -320,7 +324,8 @@ const htmlElms = {
   },
   iframe: {
     contentTypes: ['interactive', 'embedded', 'phrasing', 'flow'],
-    allowedRoles: ['application', 'document', 'img', 'none', 'presentation']
+    allowedRoles: ['application', 'document', 'img', 'none', 'presentation'],
+    chromiumRole: 'Iframe'
   },
   img: {
     variant: {
@@ -525,7 +530,8 @@ const htmlElms = {
   },
   label: {
     contentTypes: ['interactive', 'phrasing', 'flow'],
-    allowedRoles: false
+    allowedRoles: false,
+    chromiumRole: 'Label'
   },
   legend: {
     allowedRoles: false
@@ -601,7 +607,8 @@ const htmlElms = {
   },
   meter: {
     contentTypes: ['phrasing', 'flow'],
-    allowedRoles: false
+    allowedRoles: false,
+    chromiumRole: 'progressbar'
   },
   nav: {
     contentTypes: ['sectioning', 'flow'],
@@ -623,7 +630,8 @@ const htmlElms = {
         contentTypes: ['embedded', 'phrasing', 'flow']
       }
     },
-    allowedRoles: ['application', 'document', 'img']
+    allowedRoles: ['application', 'document', 'img'],
+    chromiumRole: 'PluginObject'
   },
   ol: {
     contentTypes: ['flow'],
@@ -814,6 +822,7 @@ const htmlElms = {
   svg: {
     contentTypes: ['embedded', 'phrasing', 'flow'],
     allowedRoles: ['application', 'document', 'img'],
+    chromiumRole: 'SVGRoot',
     namingMethods: ['svgTitleText']
   },
   sub: {
@@ -914,7 +923,8 @@ const htmlElms = {
         contentTypes: ['embedded', 'phrasing', 'flow']
       }
     },
-    allowedRoles: ['application']
+    allowedRoles: ['application'],
+    chromiumRole: 'video'
   },
   wbr: {
     contentTypes: ['phrasing', 'flow'],

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

@@ -65,19 +65,24 @@ describe('aria-prohibited-attr', function() {
     assert.isFalse(checkEvaluate.apply(checkContext, params));
   });
 
-  it('should allow `elementsAllowedAriaLabel` nodes to have aria-label', function () {
+  it('should allow `elementsAllowedAriaLabel` nodes to have aria-label', function() {
     var params = checkSetup(
       '<div id="target" aria-label="hello world"></div>',
       { elementsAllowedAriaLabel: ['div'] }
     );
     assert.isFalse(checkEvaluate.apply(checkContext, params));
   });
-  
-  it('should not allow `elementsAllowedAriaLabel` nodes with a prohibited role', function () {
+
+  it('should not allow `elementsAllowedAriaLabel` nodes with a prohibited role', function() {
     var params = checkSetup(
       '<div id="target" role="code" aria-label="hello world"></div>',
       { elementsAllowedAriaLabel: ['div'] }
     );
     assert.isTrue(checkEvaluate.apply(checkContext, params));
   });
+
+  it('should allow elements that have an implicit role in chromium', function() {
+    var params = checkSetup('<svg id="target" aria-label="hello world"></svg>');
+    assert.isFalse(checkEvaluate.apply(checkContext, params));
+  });
 });

test/commons/aria/implicit-role.js

@@ -32,6 +32,20 @@ describe('aria.implicitRole', function() {
     assert.isNull(implicitRole(node));
   });
 
+  it('should return null if there is no implicit role when not considering chromium', function() {
+    fixture.innerHTML = '<canvas id="target" aria-label="hello"></canvas>';
+    var node = fixture.querySelector('#target');
+    flatTreeSetup(fixture);
+    assert.isNull(implicitRole(node));
+  });
+
+  it('should return the chromium implicit role for elements that have one', function() {
+    fixture.innerHTML = '<canvas id="target" aria-label="hello"></canvas>';
+    var node = fixture.querySelector('#target');
+    flatTreeSetup(fixture);
+    assert.equal(implicitRole(node, { chromium: true }), 'Canvas');
+  });
+
   it('should return link for "a[href]"', function() {
     fixture.innerHTML = '<a id="target" href>link</a>';
     var node = fixture.querySelector('#target');
@@ -287,7 +301,8 @@ describe('aria.implicitRole', function() {
   });
 
   it('should return textbox for "input[type=password][list]"', function() {
-    fixture.innerHTML = '<input id="target" type="password" list="list"/>' +
+    fixture.innerHTML =
+      '<input id="target" type="password" list="list"/>' +
       '<datalist id="list"></datalist>';
     var node = fixture.querySelector('#target');
     flatTreeSetup(fixture);

test/integration/rules/presentation-role-conflict/presentation-role-conflict.html

@@ -1,4 +1,4 @@
-<div id="pass1" role="presentation">Test</div>
-<div id="pass2" role="presentation">Test Button</div>
 <li id="violation1" role="presentation" aria-label="My Heading">Hello</li>
 <h1 id="violation2" role="none" aria-label="My Heading">Hello</h1>
+<div id="inapplicable1" role="presentation">Test</div>
+<div id="inapplicable2" role="presentation">Test Button</div>

test/integration/rules/presentation-role-conflict/presentation-role-conflict.json

@@ -1,6 +1,5 @@
 {
   "rule": "presentation-role-conflict",
   "description": "presentation-role-conflict tests",
-  "violations": [["#violation1"], ["#violation2"]],
-  "passes": [["#pass1"], ["#pass2"]]
+  "violations": [["#violation1"], ["#violation2"]]
 }