Add aria-activedescendant-has-tabindex rule (#135)

* Add aria-activedescendant-has-tabindex rule

* Fix lint and test failures in aria-activedescendant-has-tabindex rule

* Responding to review comments

* Forgot to add a change to the previous commit.

Author: jessebeach

README.md

@@ -84,6 +84,7 @@ You can also enable all the recommended rules at once. Add `plugin:jsx-a11y/reco
 
 - [accessible-emoji](docs/rules/accessible-emoji): Enforce emojis are wrapped in <span> and provide screenreader access.
 - [anchor-has-content](docs/rules/anchor-has-content.md): Enforce all anchors to contain accessible content.
+- [aria-activedescendant-has-tabindex](docs/rules/aria-activedescendant-has-tabindex.md): Enforce elements with aria-activedescendant are tabbable.
 - [aria-props](docs/rules/aria-props.md): Enforce all `aria-*` props are valid.
 - [aria-proptypes](docs/rules/aria-proptypes.md): Enforce ARIA state and property values are valid.
 - [aria-role](docs/rules/aria-role.md): Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.

__tests__/src/rules/aria-activedescendant-has-tabindex-test.js

@@ -0,0 +1,105 @@
+/**
+ * @fileoverview Enforce elements with aria-activedescendant are tabbable.
+ * @author Jesse Beach <@jessebeach>
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { RuleTester } from 'eslint';
+import rule from '../../../src/rules/aria-activedescendant-has-tabindex';
+
+const parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true,
+  },
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const expectedError = {
+  message: 'An element that manages focus with `aria-activedescendant` ' +
+    'must be tabbable',
+  type: 'JSXOpeningElement',
+};
+
+ruleTester.run('aria-activedescendant-has-tabindex', rule, {
+  valid: [
+    {
+      code: '<CustomComponent />;',
+      parserOptions,
+    },
+    {
+      code: '<CustomComponent aria-activedescendant={someID} />;',
+      parserOptions,
+    },
+    {
+      code: '<CustomComponent aria-activedescendant={someID} tabIndex={0} />;',
+      parserOptions,
+    },
+    {
+      code: '<CustomComponent aria-activedescendant={someID} tabIndex={-1} />;',
+      parserOptions,
+    },
+    {
+      code: '<div />;',
+      parserOptions,
+    },
+    {
+      code: '<input />;',
+      parserOptions,
+    },
+    {
+      code: '<div tabIndex={0} />;',
+      parserOptions,
+    },
+    {
+      code: '<div aria-activedescendant={someID} tabIndex={0} />;',
+      parserOptions,
+    },
+    {
+      code: '<div aria-activedescendant={someID} tabIndex="0" />;',
+      parserOptions,
+    },
+    {
+      code: '<div aria-activedescendant={someID} tabIndex={1} />;',
+      parserOptions,
+    },
+    {
+      code: '<input aria-activedescendant={someID} />;',
+      parserOptions,
+    },
+    {
+      code: '<input aria-activedescendant={someID} tabIndex={0} />;',
+      parserOptions,
+    },
+  ],
+  invalid: [
+    {
+      code: '<div aria-activedescendant={someID} />;',
+      errors: [expectedError],
+      parserOptions,
+    },
+    {
+      code: '<div aria-activedescendant={someID} tabIndex={-1} />;',
+      errors: [expectedError],
+      parserOptions,
+    },
+    {
+      code: '<div aria-activedescendant={someID} tabIndex="-1" />;',
+      errors: [expectedError],
+      parserOptions,
+    },
+    {
+      code: '<input aria-activedescendant={someID} tabIndex={-1} />;',
+      errors: [expectedError],
+      parserOptions,
+    },
+  ],
+});

docs/rules/aria-activedescendant-has-tabindex.md

@@ -0,0 +1,46 @@
+# aria-activedescendant-has-tabindex
+
+`aria-activedescendant` is used to manage focus within a [composite widget](https://www.w3.org/TR/wai-aria/roles#composite_header).
+The element with the attribute `aria-activedescendant` retains the active document
+focus; it indicates which of its child elements has secondary focus by assigning
+the ID of that element to the value of `aria-activedescendant`. This pattern is
+used to build a widget like a search typeahead select list. The search input box
+retains document focus so that the user can type in the input. If the down arrow
+key is pressed and a search suggestion is highlighted, the ID of the suggestion
+element will be applied as the value of `aria-activedescendant` on the input
+element.
+
+Because an element with `aria-activedescendant` must be tabbable, it must either
+have an inherent `tabIndex` of zero or declare a `tabIndex` of zero with the `tabIndex`
+attribute.
+
+#### References
+1. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute)
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<CustomComponent />
+<CustomComponent aria-activedescendant={someID} />
+<CustomComponent aria-activedescendant={someID} tabIndex={0} />
+<CustomComponent aria-activedescendant={someID} tabIndex={-1} />
+<div />
+<input />
+<div tabIndex={0} />
+<div aria-activedescendant={someID} tabIndex={0} />
+<div aria-activedescendant={someID} tabIndex="0" />
+<div aria-activedescendant={someID} tabIndex={1} />
+<input aria-activedescendant={someID} />
+<input aria-activedescendant={someID} tabIndex={0} />
+```
+
+### Fail
+```jsx
+<div aria-activedescendant={someID} />
+<div aria-activedescendant={someID} tabIndex={-1} />
+<div aria-activedescendant={someID} tabIndex="-1" />
+<input aria-activedescendant={someID} tabIndex={-1} />
+```

src/index.js

@@ -4,6 +4,7 @@ module.exports = {
   rules: {
     'accessible-emoji': require('./rules/accessible-emoji'),
     'anchor-has-content': require('./rules/anchor-has-content'),
+    'aria-activedescendant-has-tabindex': require('./rules/aria-activedescendant-has-tabindex'),
     'aria-props': require('./rules/aria-props'),
     'aria-proptypes': require('./rules/aria-proptypes'),
     'aria-role': require('./rules/aria-role'),
@@ -39,6 +40,7 @@ module.exports = {
       rules: {
         'jsx-a11y/accessible-emoji': 'error',
         'jsx-a11y/anchor-has-content': 'error',
+        'jsx-a11y/aria-activedescendant-has-tabindex': 'error',
         'jsx-a11y/aria-props': 'error',
         'jsx-a11y/aria-proptypes': 'error',
         'jsx-a11y/aria-role': 'error',

src/rules/aria-activedescendant-has-tabindex.js

@@ -0,0 +1,69 @@
+/**
+ * @fileoverview Enforce elements with aria-activedescendant are tabbable.
+ * @author Jesse Beach <@jessebeach>
+ */
+
+import { getProp, elementType } from 'jsx-ast-utils';
+import { generateObjSchema } from '../util/schemas';
+import DOMElements from '../util/attributes/DOM.json';
+import getTabIndex from '../util/getTabIndex';
+import isInteractiveElement from '../util/isInteractiveElement';
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+const errorMessage =
+  'An element that manages focus with `aria-activedescendant` must be tabbable';
+
+const schema = generateObjSchema();
+
+const DOMElementKeys = Object.keys(DOMElements);
+
+module.exports = {
+  meta: {
+    docs: {},
+    schema: [schema],
+  },
+
+  create: context => ({
+    JSXOpeningElement: (node) => {
+      const { attributes } = node;
+
+      if (getProp(attributes, 'aria-activedescendant') === undefined) {
+        return;
+      }
+
+      const type = elementType(node);
+      // Do not test higher level JSX components, as we do not know what
+      // low-level DOM element this maps to.
+      if (DOMElementKeys.indexOf(type) === -1) {
+        return;
+      }
+      const tabIndex = getTabIndex(getProp(attributes, 'tabIndex'));
+
+      // If this is an interactive element, tabIndex must be either left
+      // unspecified allowing the inherent tabIndex to obtain or it must be
+      // zero (allowing for positive, even though that is not ideal). It cannot
+      // be given a negative value.
+      if (
+        isInteractiveElement(type, attributes)
+        && (
+          tabIndex === undefined
+          || tabIndex >= 0
+        )
+      ) {
+        return;
+      }
+
+      if (tabIndex >= 0) {
+        return;
+      }
+
+      context.report({
+        node,
+        message: errorMessage,
+      });
+    },
+  }),
+};