fix(aria-roles): exception for focus-order-semantics

add `window` to has-widget-role, renamed

Refs: #4371

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

@@ -0,0 +1,26 @@
+import { getRoleType } from '../../commons/aria';
+
+const acceptedRoles = {
+  widget: true,
+  composite: true,
+  window: true
+};
+
+/**
+ * Check if an elements `role` attribute uses any widget, composite, window abstract role values.
+ *
+ * Widget roles are taken from the `ariaRoles` standards object from the roles `type` property.
+ *
+ * @memberof checks
+ * @return {Boolean} True if the element uses a `widget`, `composite`, or `window` abstract role (type). False otherwise.
+ */
+// # TODO: change to abstract role for widget and window
+function hasWidgetOrWindowRoleEvaluate(node) {
+  const role = node.getAttribute('role');
+  if (role === null) {
+    return false;
+  }
+  return !!acceptedRoles[getRoleType(role)];
+}
+
+export default hasWidgetOrWindowRoleEvaluate;

lib/checks/aria/has-widget-role.json → lib/checks/aria/has-widget-or-window-role.json

@@ -1,6 +1,6 @@
 {
-  "id": "has-widget-role",
-  "evaluate": "has-widget-role-evaluate",
+  "id": "has-widget-or-window-role",
+  "evaluate": "has-widget-or-window-role-evaluate",
   "options": [],
   "metadata": {
     "impact": "minor",

lib/rules/focus-order-semantics.json

@@ -9,6 +9,6 @@
     "help": "Elements in the focus order should have an appropriate role"
   },
   "all": [],
-  "any": ["has-widget-role", "valid-scrollable-semantics"],
+  "any": ["has-widget-or-window-role", "valid-scrollable-semantics"],
   "none": []
 }

locales/_template.json

@@ -576,7 +576,7 @@
       },
       "fail": "Element does not have global ARIA attribute"
     },
-    "has-widget-role": {
+    "has-widget-or-window-role": {
       "pass": "Element has a widget role.",
       "fail": "Element does not have a widget role."
     },

test/checks/aria/has-widget-or-window-role.js

@@ -0,0 +1,118 @@
+describe('has-widget-or-window-role', function () {
+  'use strict';
+
+  let node;
+  const fixture = document.getElementById('fixture');
+  const checkContext = axe.testUtils.MockCheckContext();
+  const evaluate = currentNode =>
+    axe.testUtils
+      .getCheckEvaluate('has-widget-or-window-role')
+      .call(checkContext, currentNode);
+  const roles = {
+    widget: {
+      button: true,
+      checkbox: true,
+      gridcell: true,
+      link: true,
+      menuitem: true,
+      menuitemcheckbox: true,
+      menuitemradio: true,
+      option: true,
+      progressbar: true,
+      radio: true,
+      scrollbar: true,
+      searchbox: true,
+      slider: true,
+      spinbutton: true,
+      switch: true,
+      tab: true,
+      tabpanel: true,
+      textbox: true,
+      treeitem: true
+    },
+    composite: {
+      combobox: true,
+      grid: true,
+      listbox: true,
+      menu: true,
+      menubar: true,
+      radiogroup: true,
+      tablist: true,
+      tree: true,
+      treegrid: true,
+
+      application: false,
+      article: false,
+      cell: false,
+      columnheader: false,
+      definition: false,
+      directory: false,
+      document: false,
+      feed: false,
+      figure: false,
+      group: false,
+      heading: false,
+      img: false,
+      list: false,
+      listitem: false,
+      math: false,
+      none: false,
+      note: false,
+      presentation: false,
+      row: false,
+      rowgroup: false,
+      rowheader: false,
+      table: false,
+      term: false,
+      toolbar: false
+    },
+    window: {
+      alertdialog: true,
+      dialog: true
+    },
+    landmark: {
+      banner: false,
+      complimentary: false,
+      contentinfo: false,
+      form: false,
+      name: false,
+      navigation: false,
+      region: false,
+      search: false
+    }
+  };
+
+  afterEach(function () {
+    node.innerHTML = '';
+    checkContext._data = null;
+  });
+
+  it('should return false for elements with no role', function () {
+    node = document.createElement('div');
+    fixture.appendChild(node);
+
+    assert.isFalse(evaluate(node));
+  });
+
+  it('should return false for elements with nonsensical roles', function () {
+    node = document.createElement('div');
+    node.setAttribute('role', 'buttonbuttonbutton');
+    fixture.appendChild(node);
+
+    assert.isFalse(evaluate(node));
+  });
+
+  Object.keys(roles).forEach(category => {
+    describe(category, function () {
+      Object.keys(roles[category]).forEach(role => {
+        it(`should return ${roles[category][role]} for role="${role}"`, function () {
+          node = document.createElement('div');
+          node.setAttribute('role', role);
+          fixture.appendChild(node);
+
+          assert.equal(evaluate(node), roles[category][role]);
+        });
+      });
+    });
+  });
+});