chore: refactor away from looking at role attribute

lib/checks/aria/aria-errormessage-evaluate.js

@@ -1,7 +1,7 @@
 import standards from '../../standards';
-import { idrefs } from '../../commons/dom';
+import { idrefs, isVisibleToScreenReaders } from '../../commons/dom';
 import { tokenList } from '../../core/utils';
-import { isVisibleToScreenReaders } from '../../commons/dom';
+import { getExplicitRole } from '../../commons/aria';
 /**
  * Check if `aria-errormessage` references an element that also uses a technique to announce the message (aria-live, aria-describedby, etc.).
  *
@@ -63,7 +63,7 @@ export default function ariaErrormessageEvaluate(node, options, virtualNode) {
         return false;
       }
       return (
-        idref.getAttribute('role') === 'alert' ||
+        getExplicitRole(idref) === 'alert' ||
         idref.getAttribute('aria-live') === 'assertive' ||
         idref.getAttribute('aria-live') === 'polite' ||
         tokenList(virtualNode.attr('aria-describedby')).indexOf(attr) > -1

lib/checks/aria/has-widget-role-evaluate.js

@@ -1,4 +1,4 @@
-import { getRoleType } from '../../commons/aria';
+import { getRoleType, getExplicitRole } from '../../commons/aria';
 
 /**
  * Check if an elements `role` attribute uses any widget or composite role values.
@@ -8,8 +8,8 @@ import { getRoleType } from '../../commons/aria';
  * @memberof checks
  * @return {Boolean} True if the element uses a `widget` or `composite` role. False otherwise.
  */
-function hasWidgetRoleEvaluate(node) {
-  const role = node.getAttribute('role');
+function hasWidgetRoleEvaluate(node, options, virtualNode) {
+  const role = getExplicitRole(virtualNode);
   if (role === null) {
     return false;
   }

lib/checks/keyboard/landmark-is-top-level-evaluate.js

@@ -1,4 +1,4 @@
-import { getRole, implicitRole } from '../../commons/aria';
+import { getRole, implicitRole, getExplicitRole } from '../../commons/aria';
 import { getAriaRolesByType } from '../../commons/standards';
 import { getComposedParent } from '../../commons/dom';
 
@@ -10,7 +10,7 @@ function landmarkIsTopLevelEvaluate(node) {
   this.data({ role: nodeRole });
 
   while (parent) {
-    let role = parent.getAttribute('role');
+    let role = getExplicitRole(parent);
     if (!role && parent.nodeName.toUpperCase() !== 'FORM') {
       role = implicitRole(parent);
     }

lib/checks/tables/th-has-data-cells-evaluate.js

@@ -1,5 +1,6 @@
 import * as tableUtils from '../../commons/table';
 import { sanitize } from '../../commons/text';
+import { getExplicitRole } from '../../commons/aria';
 
 function thHasDataCellsEvaluate(node) {
   const cells = tableUtils.getAllCells(node);
@@ -26,7 +27,7 @@ function thHasDataCellsEvaluate(node) {
     }
     return (
       cell.nodeName.toUpperCase() === 'TH' ||
-      ['rowheader', 'columnheader'].indexOf(cell.getAttribute('role')) !== -1
+      ['rowheader', 'columnheader'].indexOf(getExplicitRole(cell)) !== -1
     );
   });
 

lib/commons/table/get-scope.js

@@ -2,6 +2,7 @@ import toGrid from './to-grid';
 import getCellPosition from './get-cell-position';
 import findUp from '../dom/find-up';
 import { nodeLookup } from '../../core/utils';
+import getExplicitRole from '../aria/get-explicit-role';
 
 /**
  * Determine if a `HTMLTableCellElement` is a column header, if so get the scope of the header
@@ -15,7 +16,7 @@ export default function getScope(el) {
   const { vNode, domNode: cell } = nodeLookup(el);
 
   const scope = vNode.attr('scope');
-  const role = vNode.attr('role');
+  const role = getExplicitRole(vNode);
 
   if (!['td', 'th'].includes(vNode.props.nodeName)) {
     throw new TypeError('Expected TD or TH element');

lib/commons/table/is-data-cell.js

@@ -1,4 +1,4 @@
-import isValidRole from '../aria/is-valid-role';
+import getExplicitRole from '../aria/get-explicit-role';
 
 /**
  * Determine if a `HTMLTableCellElement` is a data cell
@@ -13,8 +13,8 @@ function isDataCell(cell) {
   if (!cell.children.length && !cell.textContent.trim()) {
     return false;
   }
-  const role = cell.getAttribute('role');
-  if (isValidRole(role)) {
+  const role = getExplicitRole(cell);
+  if (role) {
     return ['cell', 'gridcell'].includes(role);
   } else {
     return cell.nodeName.toUpperCase() === 'TD';

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

@@ -1,4 +1,5 @@
 import getRoleType from '../aria/get-role-type';
+import getExplicitRole from '../aria/get-explicit-role';
 import isFocusable from '../dom/is-focusable';
 import findUp from '../dom/find-up';
 import getElementCoordinates from '../dom/get-element-coordinates';
@@ -14,7 +15,7 @@ import getViewportSize from '../dom/get-viewport-size';
  * @see http://asurkov.blogspot.co.uk/2011/10/data-vs-layout-table.html
  */
 function isDataTable(node) {
-  const role = (node.getAttribute('role') || '').toLowerCase();
+  const role = getExplicitRole(node);
 
   // The element is not focusable and has role=presentation
   if ((role === 'presentation' || role === 'none') && !isFocusable(node)) {
@@ -93,11 +94,7 @@ function isDataTable(node) {
       ) {
         return true;
       }
-      if (
-        ['columnheader', 'rowheader'].includes(
-          (cell.getAttribute('role') || '').toLowerCase()
-        )
-      ) {
+      if (['columnheader', 'rowheader'].includes(getExplicitRole(cell))) {
         return true;
       }
       // abbr element as a single child element of table cell

lib/rules/autocomplete-matches.js

@@ -2,6 +2,7 @@ import { sanitize } from '../commons/text';
 import standards from '../standards';
 import { isVisibleToScreenReaders, isVisibleOnScreen } from '../commons/dom';
 import { parseTabindex } from '../core/utils';
+import { getExplicitRole } from '../commons/aria';
 
 function autocompleteMatches(node, virtualNode) {
   const autocomplete = virtualNode.attr('autocomplete');
@@ -43,9 +44,10 @@ function autocompleteMatches(node, virtualNode) {
 
   // The element has `tabindex="-1"` and has a [[semantic role]] that is
   //   not a [widget](https://www.w3.org/TR/wai-aria-1.1/#widget_roles)
-  const role = virtualNode.attr('role');
+  const role = getExplicitRole(virtualNode);
+  console.log({ role });
   const tabIndex = parseTabindex(virtualNode.attr('tabindex'));
-  if (tabIndex < 0 && role) {
+  if (tabIndex < 0 && virtualNode.hasAttr('role')) {
     const roleDef = standards.ariaRoles[role];
     if (roleDef === undefined || roleDef.type !== 'widget') {
       return false;

lib/rules/link-in-text-block-matches.js

@@ -1,9 +1,10 @@
 import { sanitize } from '../commons/text';
 import { isVisibleOnScreen, isInTextBlock } from '../commons/dom';
+import { getExplicitRole } from '../commons/aria';
 
 function linkInTextBlockMatches(node) {
   const text = sanitize(node.innerText);
-  const role = node.getAttribute('role');
+  const role = getExplicitRole(node);
 
   if (role && role !== 'link') {
     return false;