Responding to evcohen and mcking65 comments

Author: jessebeach

__tests__/src/rules/onclick-has-focus-test.js

@@ -133,6 +133,11 @@ ruleTester.run('onclick-has-focus', rule, {
       errors: [expectedError],
       parserOptions,
     },
+    {
+      code: '<div role="gridcell" onClick={() => void 0} />',
+      errors: [expectedError],
+      parserOptions,
+    },
     {
       code: '<div role="menuitem" onClick={() => void 0} />',
       errors: [expectedError],
@@ -158,6 +163,16 @@ ruleTester.run('onclick-has-focus', rule, {
       errors: [expectedError],
       parserOptions,
     },
+    {
+      code: '<div role="searchbox" onClick={() => void 0} />',
+      errors: [expectedError],
+      parserOptions,
+    },
+    {
+      code: '<div role="slider" onClick={() => void 0} />',
+      errors: [expectedError],
+      parserOptions,
+    },
     {
       code: '<div role="spinbutton" onClick={() => void 0} />',
       errors: [expectedError],
@@ -178,5 +193,10 @@ ruleTester.run('onclick-has-focus', rule, {
       errors: [expectedError],
       parserOptions,
     },
+    {
+      code: '<div role="treeitem" onClick={() => void 0} />',
+      errors: [expectedError],
+      parserOptions,
+    },
   ],
 });

docs/rules/onclick-has-focus.md

@@ -10,6 +10,14 @@ Elements that are inherently focusable are as follows:
 
 This rule will only test low-level DOM components, as we can not deterministically map wrapper JSX components to their correct DOM element.
 
+## `tabIndex` of an element with role `gridcell`
+
+Within a grid, a grid cell may itself be tabbable if it contains text content.
+In this case, apply a `tabIndex` of 0.
+
+If the content of the grid cell is tabbable -- for example a button or link --,
+this apply a `tabIndex` of -1.
+
 #### References
 1. [AX_FOCUS_02](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_02)
 2. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)

src/util/attributes/role.json

@@ -1474,7 +1474,7 @@
   "GRIDCELL": {
     "requiredProps": [],
     "abstract": false,
-    "interactive": false,
+    "interactive": true,
     "props": [
       "ARIA-READONLY",
       "ARIA-REQUIRED",
@@ -2303,6 +2303,40 @@
       "ARIA-RELEVANT"
     ]
   },
+  "SEARCHBOX": {
+    "props": [
+      "ARIA-ACTIVEDESCENDANT",
+      "ARIA-ATOMIC",
+      "ARIA-AUTOCOMPLETE",
+      "ARIA-BUSY",
+      "ARIA-CONTROLS",
+      "ARIA-CURRENT",
+      "ARIA-DESCRIBEDBY",
+      "ARIA-DETAILS",
+      "ARIA-DISABLED",
+      "ARIA-DROPEFFECT",
+      "ARIA-ERRORMESSAGE",
+      "ARIA-FLOWTO",
+      "ARIA-GRABBED",
+      "ARIA-HASPOPUP",
+      "ARIA-HIDDEN",
+      "ARIA-INVALID",
+      "ARIA-KEYSHORTCUTS",
+      "ARIA-LABEL",
+      "ARIA-LABELLEDBY",
+      "ARIA-LIVE",
+      "ARIA-MULTILINE",
+      "ARIA-OWNS",
+      "ARIA-PLACEHOLDER",
+      "ARIA-READONLY",
+      "ARIA-RELEVANT",
+      "ARIA-REQUIRED",
+      "ARIA-ROLEDESCRIPTION"
+    ],
+    "requiredProps": [],
+    "abstract": false,
+    "interactive": true
+  },
   "SECTION": {
     "props": [
       "ARIA-EXPANDED",
@@ -2442,7 +2476,7 @@
       "ARIA-VALUENOW"
     ],
     "abstract": false,
-    "interactive": false,
+    "interactive": true,
     "props": [
       "ARIA-VALUEMAX",
       "ARIA-VALUEMIN",
@@ -2808,7 +2842,7 @@
   "TREEITEM": {
     "requiredProps": [],
     "abstract": false,
-    "interactive": false,
+    "interactive": true,
     "props": [
       "ARIA-LEVEL",
       "ARIA-POSINSET",

src/util/isInteractiveRole.js

@@ -2,6 +2,9 @@ import { getProp, getLiteralPropValue } from 'jsx-ast-utils';
 import DOMElements from './attributes/DOM.json';
 import roles from './attributes/role.json';
 
+
+const VALID_ROLES = Object.keys(roles)
+  .filter(role => roles[role].interactive === true);
 /**
  * Returns boolean indicating whether the given element has a role
  * that is associated with an interactive component. Used when an element
@@ -30,8 +33,9 @@ const isInteractiveRole = (tagName, attributes) => {
   }
 
   const normalizedValues = String(value).toUpperCase().split(' ');
-  const validRoles = Object.keys(roles).filter(role => roles[role].interactive === true);
-  const isInteractive = normalizedValues.every(val => validRoles.indexOf(val) > -1);
+  const isInteractive = normalizedValues.every(
+    val => VALID_ROLES.indexOf(val) > -1,
+  );
 
   return isInteractive;
 };