Allow negative tabindex in aria-activedescendant-has-tabindex

jsx-eslint · Jun 20, 2020 · 452391c · 452391c
1 parent f6ce5fe
commit 452391c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 17 deletions.
diff --git a/__tests__/src/rules/aria-activedescendant-has-tabindex-test.js b/__tests__/src/rules/aria-activedescendant-has-tabindex-test.js
@@ -18,7 +18,7 @@ import rule from '../../../src/rules/aria-activedescendant-has-tabindex';
 const ruleTester = new RuleTester();
 
 const expectedError = {
-  message: 'An element that manages focus with `aria-activedescendant` must be tabbable',
+  message: 'An element that manages focus with `aria-activedescendant` must have a tabindex',
   type: 'JSXOpeningElement',
 };
 
@@ -57,25 +57,28 @@ ruleTester.run('aria-activedescendant-has-tabindex', rule, {
     {
       code: '<input aria-activedescendant={someID} />;',
     },
+    {
+      code: '<input aria-activedescendant={someID} tabIndex={1} />;',
+    },
     {
       code: '<input aria-activedescendant={someID} tabIndex={0} />;',
     },
-  ].map(parserOptionsMapper),
-  invalid: [
     {
-      code: '<div aria-activedescendant={someID} />;',
-      errors: [expectedError],
+      code: '<input aria-activedescendant={someID} tabIndex={-1} />;',
     },
     {
       code: '<div aria-activedescendant={someID} tabIndex={-1} />;',
-      errors: [expectedError],
     },
     {
       code: '<div aria-activedescendant={someID} tabIndex="-1" />;',
-      errors: [expectedError],
     },
     {
       code: '<input aria-activedescendant={someID} tabIndex={-1} />;',
+    },
+  ].map(parserOptionsMapper),
+  invalid: [
+    {
+      code: '<div aria-activedescendant={someID} />;',
       errors: [expectedError],
     },
   ].map(parserOptionsMapper),

diff --git a/src/rules/aria-activedescendant-has-tabindex.js b/src/rules/aria-activedescendant-has-tabindex.js
@@ -13,7 +13,7 @@ import isInteractiveElement from '../util/isInteractiveElement';
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-const errorMessage = 'An element that manages focus with `aria-activedescendant` must be tabbable';
+const errorMessage = 'An element that manages focus with `aria-activedescendant` must have a tabindex';
 
 const schema = generateObjSchema();
 
@@ -43,21 +43,17 @@ module.exports = {
       }
       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 this is an interactive element and the tabindex attribute is not specified,
+      // or the tabIndex property was not mutated, then the tabIndex
+      // property will be undefined.
       if (
         isInteractiveElement(type, attributes)
-        && (
-          tabIndex === undefined
-          || tabIndex >= 0
-        )
+        && tabIndex === undefined
       ) {
         return;
       }
 
-      if (tabIndex >= 0) {
+      if (tabIndex >= 0 || tabIndex <= -1) {
         return;
       }