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

gaiety-deque · gaiety-deque · commit facd65f6f528 · 2024-04-25T14:19:46.000-05:00
add `window` to has-widget-role, renamed Refs: #4371
diff --git a/lib/checks/aria/has-widget-or-window-role-evaluate.js b/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;
diff --git a/lib/checks/aria/has-widget-or-window-role.json b/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",
diff --git a/lib/checks/aria/has-widget-role-evaluate.js b/lib/checks/aria/has-widget-role-evaluate.js
diff --git a/lib/rules/focus-order-semantics.json b/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": []
 }
diff --git a/locales/_template.json b/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."
     },
diff --git a/test/checks/aria/has-widget-or-window-role.js b/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]);
+        });
+      });
+    });
+  });
+});
diff --git a/test/checks/aria/has-widget-role.js b/test/checks/aria/has-widget-role.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`		`- "id": "has-widget-role",`
`3`		`- "evaluate": "has-widget-role-evaluate",`
	`2`	`+ "id": "has-widget-or-window-role",`
	`3`	`+ "evaluate": "has-widget-or-window-role-evaluate",`
`4`	`4`	`"options": [],`
`5`	`5`	`"metadata": {`
`6`	`6`	`"impact": "minor",`
Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,6 @@`
`9`	`9`	`"help": "Elements in the focus order should have an appropriate role"`
`10`	`10`	`},`
`11`	`11`	`"all": [],`
`12`		`- "any": ["has-widget-role", "valid-scrollable-semantics"],`
	`12`	`+ "any": ["has-widget-or-window-role", "valid-scrollable-semantics"],`
`13`	`13`	`"none": []`
`14`	`14`	`}`