fix: consistently parse tabindex, following HTML 5 spec (#4637)

Ensures tabindex is correctly parsed as an integer using regex instead
of parseInt to comply with HTML standards.

Closes #4632

Author: ahmedhalac

lib/checks/keyboard/focusable-no-name-evaluate.js

@@ -1,10 +1,8 @@
-import { isFocusable } from '../../commons/dom';
+import { isInTabOrder } from '../../commons/dom';
 import { accessibleTextVirtual } from '../../commons/text';
 
 function focusableNoNameEvaluate(node, options, virtualNode) {
-  const tabIndex = virtualNode.attr('tabindex');
-  const inFocusOrder = isFocusable(virtualNode) && tabIndex > -1;
-  if (!inFocusOrder) {
+  if (!isInTabOrder(virtualNode)) {
     return false;
   }
 

lib/checks/keyboard/no-focusable-content-evaluate.js

@@ -1,5 +1,6 @@
 import isFocusable from '../../commons/dom/is-focusable';
 import { getRoleType } from '../../commons/aria';
+import { parseTabindex } from '../../core/utils';
 
 export default function noFocusableContentEvaluate(node, options, virtualNode) {
   if (!virtualNode.children) {
@@ -51,6 +52,6 @@ function getFocusableDescendants(vNode) {
 }
 
 function usesUnreliableHidingStrategy(vNode) {
-  const tabIndex = parseInt(vNode.attr('tabindex'), 10);
-  return !isNaN(tabIndex) && tabIndex < 0;
+  const tabIndex = parseTabindex(vNode.attr('tabindex'));
+  return tabIndex !== null && tabIndex < 0;
 }

lib/checks/keyboard/tabindex-evaluate.js

@@ -1,10 +1,12 @@
+import { parseTabindex } from '../../core/utils';
+
 function tabindexEvaluate(node, options, virtualNode) {
-  const tabIndex = parseInt(virtualNode.attr('tabindex'), 10);
+  const tabIndex = parseTabindex(virtualNode.attr('tabindex'));
 
   // an invalid tabindex will either return 0 or -1 (based on the element) so
   // will never be above 0
   // @see https://www.w3.org/TR/html51/editing.html#the-tabindex-attribute
-  return isNaN(tabIndex) ? true : tabIndex <= 0;
+  return tabIndex === null || tabIndex <= 0;
 }
 
 export default tabindexEvaluate;

lib/commons/dom/get-tabbable-elements.js

@@ -1,4 +1,5 @@
 import { querySelectorAll } from '../../core/utils';
+import { parseTabindex } from '../../core/utils';
 
 /**
  * Get all elements (including given node) that are part of the tab order
@@ -13,11 +14,9 @@ function getTabbableElements(virtualNode) {
 
   const tabbableElements = nodeAndDescendents.filter(vNode => {
     const isFocusable = vNode.isFocusable;
-    let tabIndex = vNode.actualNode.getAttribute('tabindex');
-    tabIndex =
-      tabIndex && !isNaN(parseInt(tabIndex, 10)) ? parseInt(tabIndex) : null;
+    const tabIndex = parseTabindex(vNode.actualNode.getAttribute('tabindex'));
 
-    return tabIndex ? isFocusable && tabIndex >= 0 : isFocusable;
+    return tabIndex !== null ? isFocusable && tabIndex >= 0 : isFocusable;
   });
 
   return tabbableElements;

lib/commons/dom/inserted-into-focus-order.js

@@ -1,5 +1,6 @@
 import isFocusable from './is-focusable';
 import isNativelyFocusable from './is-natively-focusable';
+import { parseTabindex } from '../../core/utils';
 
 /**
  * Determines if an element is in the focus order, but would not be if its
@@ -12,7 +13,7 @@ import isNativelyFocusable from './is-natively-focusable';
  * if its tabindex were removed. Else, false.
  */
 function insertedIntoFocusOrder(el) {
-  const tabIndex = parseInt(el.getAttribute('tabindex'), 10);
+  const tabIndex = parseTabindex(el.getAttribute('tabindex'));
 
   // an element that has an invalid tabindex will return 0 or -1 based on
   // if it is natively focusable or not, which will always be false for this

lib/commons/dom/is-focusable.js

@@ -1,6 +1,7 @@
 import focusDisabled from './focus-disabled';
 import isNativelyFocusable from './is-natively-focusable';
 import { nodeLookup } from '../../core/utils';
+import { parseTabindex } from '../../core/utils';
 
 /**
  * Determines if an element is keyboard or programmatically focusable.
@@ -23,10 +24,6 @@ export default function isFocusable(el) {
     return true;
   }
   // check if the tabindex is specified and a parseable number
-  const tabindex = vNode.attr('tabindex');
-  if (tabindex && !isNaN(parseInt(tabindex, 10))) {
-    return true;
-  }
-
-  return false;
+  const tabindex = parseTabindex(vNode.attr('tabindex'));
+  return tabindex !== null;
 }

lib/commons/dom/is-in-tab-order.js

@@ -1,5 +1,6 @@
 import { nodeLookup } from '../../core/utils';
 import isFocusable from './is-focusable';
+import { parseTabindex } from '../../core/utils';
 
 /**
  * Determines if an element is focusable and able to be tabbed to.
@@ -16,7 +17,7 @@ export default function isInTabOrder(el) {
     return false;
   }
 
-  const tabindex = parseInt(vNode.attr('tabindex', 10));
+  const tabindex = parseTabindex(vNode.attr('tabindex'));
   if (tabindex <= -1) {
     return false; // Elements with tabindex=-1 are never in the tab order
   }

lib/core/base/context/create-frame-context.js

@@ -1,3 +1,5 @@
+import { parseTabindex } from '../../utils';
+
 export function createFrameContext(frame, { focusable, page }) {
   return {
     node: frame,
@@ -11,12 +13,8 @@ export function createFrameContext(frame, { focusable, page }) {
 }
 
 function frameFocusable(frame) {
-  const tabIndex = frame.getAttribute('tabindex');
-  if (!tabIndex) {
-    return true;
-  }
-  const int = parseInt(tabIndex, 10);
-  return isNaN(int) || int >= 0;
+  const tabIndex = parseTabindex(frame.getAttribute('tabindex'));
+  return tabIndex === null || tabIndex >= 0;
 }
 
 function getBoundingSize(domNode) {

lib/core/utils/index.js

@@ -71,6 +71,7 @@ export { default as objectHasOwn } from './object-has-own';
 export { default as parseCrossOriginStylesheet } from './parse-crossorigin-stylesheet';
 export { default as parseSameOriginStylesheet } from './parse-sameorigin-stylesheet';
 export { default as parseStylesheet } from './parse-stylesheet';
+export { default as parseTabindex } from './parse-tabindex';
 export { default as performanceTimer } from './performance-timer';
 export { pollyfillElementsFromPoint } from './pollyfill-elements-from-point';
 export { default as preloadCssom } from './preload-cssom';

lib/core/utils/parse-tabindex.js

@@ -0,0 +1,22 @@
+/**
+ * Parses a tabindex value to return an integer if valid, or null if invalid.
+ * @method parseTabindex
+ * @memberof axe.utils
+ * @param  {string|null} str
+ * @return {number|null}
+ */
+function parseTabindex(value) {
+  if (typeof value !== 'string') {
+    return null;
+  }
+
+  // spec: https://html.spec.whatwg.org/#rules-for-parsing-integers
+  const match = value.trim().match(/^([-+]?\d+)/);
+  if (match) {
+    return Number(match[1]);
+  }
+
+  return null;
+}
+
+export default parseTabindex;