Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 3b0a361

Browse files
ahmedhalacstraker
ahmedhalac
authored and
straker
committedMar 4, 2025
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
1 parent 0740980 commit 3b0a361

13 files changed

+93
-31
lines changed
 

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

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import { isFocusable } from '../../commons/dom';
1+
import { isInTabOrder } from '../../commons/dom';
22
import { accessibleTextVirtual } from '../../commons/text';
33

44
function focusableNoNameEvaluate(node, options, virtualNode) {
5-
const tabIndex = virtualNode.attr('tabindex');
6-
const inFocusOrder = isFocusable(virtualNode) && tabIndex > -1;
7-
if (!inFocusOrder) {
5+
if (!isInTabOrder(virtualNode)) {
86
return false;
97
}
108

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import isFocusable from '../../commons/dom/is-focusable';
22
import { getRoleType } from '../../commons/aria';
3+
import { parseTabindex } from '../../core/utils';
34

45
export default function noFocusableContentEvaluate(node, options, virtualNode) {
56
if (!virtualNode.children) {
@@ -51,6 +52,6 @@ function getFocusableDescendants(vNode) {
5152
}
5253

5354
function usesUnreliableHidingStrategy(vNode) {
54-
const tabIndex = parseInt(vNode.attr('tabindex'), 10);
55-
return !isNaN(tabIndex) && tabIndex < 0;
55+
const tabIndex = parseTabindex(vNode.attr('tabindex'));
56+
return tabIndex !== null && tabIndex < 0;
5657
}

‎lib/checks/keyboard/tabindex-evaluate.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
import { parseTabindex } from '../../core/utils';
2+
13
function tabindexEvaluate(node, options, virtualNode) {
2-
const tabIndex = parseInt(virtualNode.attr('tabindex'), 10);
4+
const tabIndex = parseTabindex(virtualNode.attr('tabindex'));
35

46
// an invalid tabindex will either return 0 or -1 (based on the element) so
57
// will never be above 0
68
// @see https://www.w3.org/TR/html51/editing.html#the-tabindex-attribute
7-
return isNaN(tabIndex) ? true : tabIndex <= 0;
9+
return tabIndex === null || tabIndex <= 0;
810
}
911

1012
export default tabindexEvaluate;

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

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { querySelectorAll } from '../../core/utils';
2+
import { parseTabindex } from '../../core/utils';
23

34
/**
45
* Get all elements (including given node) that are part of the tab order
@@ -13,11 +14,9 @@ function getTabbableElements(virtualNode) {
1314

1415
const tabbableElements = nodeAndDescendents.filter(vNode => {
1516
const isFocusable = vNode.isFocusable;
16-
let tabIndex = vNode.actualNode.getAttribute('tabindex');
17-
tabIndex =
18-
tabIndex && !isNaN(parseInt(tabIndex, 10)) ? parseInt(tabIndex) : null;
17+
const tabIndex = parseTabindex(vNode.actualNode.getAttribute('tabindex'));
1918

20-
return tabIndex ? isFocusable && tabIndex >= 0 : isFocusable;
19+
return tabIndex !== null ? isFocusable && tabIndex >= 0 : isFocusable;
2120
});
2221

2322
return tabbableElements;

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import isFocusable from './is-focusable';
22
import isNativelyFocusable from './is-natively-focusable';
3+
import { parseTabindex } from '../../core/utils';
34

45
/**
56
* 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';
1213
* if its tabindex were removed. Else, false.
1314
*/
1415
function insertedIntoFocusOrder(el) {
15-
const tabIndex = parseInt(el.getAttribute('tabindex'), 10);
16+
const tabIndex = parseTabindex(el.getAttribute('tabindex'));
1617

1718
// an element that has an invalid tabindex will return 0 or -1 based on
1819
// if it is natively focusable or not, which will always be false for this

‎lib/commons/dom/is-focusable.js

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import focusDisabled from './focus-disabled';
22
import isNativelyFocusable from './is-natively-focusable';
33
import { nodeLookup } from '../../core/utils';
4+
import { parseTabindex } from '../../core/utils';
45

56
/**
67
* Determines if an element is keyboard or programmatically focusable.
@@ -23,10 +24,6 @@ export default function isFocusable(el) {
2324
return true;
2425
}
2526
// check if the tabindex is specified and a parseable number
26-
const tabindex = vNode.attr('tabindex');
27-
if (tabindex && !isNaN(parseInt(tabindex, 10))) {
28-
return true;
29-
}
30-
31-
return false;
27+
const tabindex = parseTabindex(vNode.attr('tabindex'));
28+
return tabindex !== null;
3229
}

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { nodeLookup } from '../../core/utils';
22
import isFocusable from './is-focusable';
3+
import { parseTabindex } from '../../core/utils';
34

45
/**
56
* Determines if an element is focusable and able to be tabbed to.
@@ -16,7 +17,7 @@ export default function isInTabOrder(el) {
1617
return false;
1718
}
1819

19-
const tabindex = parseInt(vNode.attr('tabindex', 10));
20+
const tabindex = parseTabindex(vNode.attr('tabindex'));
2021
if (tabindex <= -1) {
2122
return false; // Elements with tabindex=-1 are never in the tab order
2223
}

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

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { parseTabindex } from '../../utils';
2+
13
export function createFrameContext(frame, { focusable, page }) {
24
return {
35
node: frame,
@@ -11,12 +13,8 @@ export function createFrameContext(frame, { focusable, page }) {
1113
}
1214

1315
function frameFocusable(frame) {
14-
const tabIndex = frame.getAttribute('tabindex');
15-
if (!tabIndex) {
16-
return true;
17-
}
18-
const int = parseInt(tabIndex, 10);
19-
return isNaN(int) || int >= 0;
16+
const tabIndex = parseTabindex(frame.getAttribute('tabindex'));
17+
return tabIndex === null || tabIndex >= 0;
2018
}
2119

2220
function getBoundingSize(domNode) {

‎lib/core/utils/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ export { default as objectHasOwn } from './object-has-own';
7171
export { default as parseCrossOriginStylesheet } from './parse-crossorigin-stylesheet';
7272
export { default as parseSameOriginStylesheet } from './parse-sameorigin-stylesheet';
7373
export { default as parseStylesheet } from './parse-stylesheet';
74+
export { default as parseTabindex } from './parse-tabindex';
7475
export { default as performanceTimer } from './performance-timer';
7576
export { pollyfillElementsFromPoint } from './pollyfill-elements-from-point';
7677
export { default as preloadCssom } from './preload-cssom';

‎lib/core/utils/parse-tabindex.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* Parses a tabindex value to return an integer if valid, or null if invalid.
3+
* @method parseTabindex
4+
* @memberof axe.utils
5+
* @param {string|null} str
6+
* @return {number|null}
7+
*/
8+
function parseTabindex(value) {
9+
if (typeof value !== 'string') {
10+
return null;
11+
}
12+
13+
// spec: https://html.spec.whatwg.org/#rules-for-parsing-integers
14+
const match = value.trim().match(/^([-+]?\d+)/);
15+
if (match) {
16+
return Number(match[1]);
17+
}
18+
19+
return null;
20+
}
21+
22+
export default parseTabindex;

‎lib/rules/autocomplete-matches.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { sanitize } from '../commons/text';
22
import standards from '../standards';
33
import { isVisibleToScreenReaders, isVisibleOnScreen } from '../commons/dom';
4+
import { parseTabindex } from '../core/utils';
45

56
function autocompleteMatches(node, virtualNode) {
67
const autocomplete = virtualNode.attr('autocomplete');
@@ -34,8 +35,8 @@ function autocompleteMatches(node, virtualNode) {
3435
// The element has `tabindex="-1"` and has a [[semantic role]] that is
3536
// not a [widget](https://www.w3.org/TR/wai-aria-1.1/#widget_roles)
3637
const role = virtualNode.attr('role');
37-
const tabIndex = virtualNode.attr('tabindex');
38-
if (tabIndex === '-1' && role) {
38+
const tabIndex = parseTabindex(virtualNode.attr('tabindex'));
39+
if (tabIndex < 0 && role) {
3940
const roleDef = standards.ariaRoles[role];
4041
if (roleDef === undefined || roleDef.type !== 'widget') {
4142
return false;
@@ -44,7 +45,7 @@ function autocompleteMatches(node, virtualNode) {
4445

4546
// The element is **not** visible on the page or exposed to assistive technologies
4647
if (
47-
tabIndex === '-1' &&
48+
tabIndex < 0 &&
4849
virtualNode.actualNode &&
4950
!isVisibleOnScreen(virtualNode) &&
5051
!isVisibleToScreenReaders(virtualNode)

‎lib/rules/no-negative-tabindex-matches.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import { parseTabindex } from '../core/utils';
2+
13
function noNegativeTabindexMatches(node, virtualNode) {
2-
const tabindex = parseInt(virtualNode.attr('tabindex'), 10);
3-
return isNaN(tabindex) || tabindex >= 0;
4+
const tabindex = parseTabindex(virtualNode.attr('tabindex'));
5+
return tabindex === null || tabindex >= 0;
46
}
57

68
export default noNegativeTabindexMatches;

‎test/core/utils/parse-tabindex.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
describe('axe.utils.parseTabindex', function () {
2+
'use strict';
3+
4+
it('should return 0 for "0"', function () {
5+
assert.strictEqual(axe.utils.parseTabindex('0'), 0);
6+
});
7+
8+
it('should return 1 for "+1"', function () {
9+
assert.strictEqual(axe.utils.parseTabindex('+1'), 1);
10+
});
11+
12+
it('should return -1 for "-1"', function () {
13+
assert.strictEqual(axe.utils.parseTabindex('-1'), -1);
14+
});
15+
16+
it('should return null for null', function () {
17+
assert.strictEqual(axe.utils.parseTabindex(null), null);
18+
});
19+
20+
it('should return null for an empty string', function () {
21+
assert.strictEqual(axe.utils.parseTabindex(''), null);
22+
});
23+
24+
it('should return null for a whitespace string', function () {
25+
assert.strictEqual(axe.utils.parseTabindex(' '), null);
26+
});
27+
28+
it('should return null for non-numeric strings', function () {
29+
assert.strictEqual(axe.utils.parseTabindex('abc'), null);
30+
});
31+
32+
it('should return the first valid digit(s) for decimal numbers', function () {
33+
assert.strictEqual(axe.utils.parseTabindex('2.5'), 2);
34+
});
35+
36+
it('should return 123 for "123abc"', function () {
37+
assert.strictEqual(axe.utils.parseTabindex('123abc'), 123);
38+
});
39+
});

0 commit comments

Comments
 (0)
Failed to load comments.