@y14e/roving-tabindex 3.1.15 → 3.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/dist/index.bundle.cjs +22 -24
- package/dist/index.bundle.js +22 -24
- package/dist/index.cjs +12 -13
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +12 -13
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -13,11 +13,11 @@ npm i @y14e/roving-tabindex
|
|
|
13
13
|
import { createRovingTabIndex } from '@y14e/roving-tabindex';
|
|
14
14
|
|
|
15
15
|
// CDNs
|
|
16
|
-
import { createRovingTabIndex } from 'https://esm.sh/@y14e/roving-tabindex@3.1.
|
|
16
|
+
import { createRovingTabIndex } from 'https://esm.sh/@y14e/roving-tabindex@3.1.16';
|
|
17
17
|
// or
|
|
18
|
-
import { createRovingTabIndex } from 'https://cdn.jsdelivr.net/npm/@y14e/roving-tabindex@3.1.
|
|
18
|
+
import { createRovingTabIndex } from 'https://cdn.jsdelivr.net/npm/@y14e/roving-tabindex@3.1.16/+esm';
|
|
19
19
|
// or
|
|
20
|
-
import { createRovingTabIndex } from 'https://esm.unpkg.com/@y14e/roving-tabindex@3.1.
|
|
20
|
+
import { createRovingTabIndex } from 'https://esm.unpkg.com/@y14e/roving-tabindex@3.1.16';
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
## 📦 APIs
|
package/dist/index.bundle.cjs
CHANGED
|
@@ -91,14 +91,14 @@ function getFocusables(container = document.body, options = {}) {
|
|
|
91
91
|
console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
|
|
92
92
|
skipVisibilityCheck = false;
|
|
93
93
|
}
|
|
94
|
-
const
|
|
94
|
+
const elements = [];
|
|
95
95
|
if (composed || include) {
|
|
96
96
|
let traverse2 = function(node) {
|
|
97
97
|
if (isFocusable(node, {
|
|
98
98
|
skipNegativeTabIndexCheck,
|
|
99
99
|
skipVisibilityCheck
|
|
100
100
|
}) || include?.(node)) {
|
|
101
|
-
|
|
101
|
+
elements[elements.length] = node;
|
|
102
102
|
}
|
|
103
103
|
const children2 = composed ? getComposedChildren(node) : getChildren(node);
|
|
104
104
|
for (let i = 0, l = children2.length; i < l; i++) {
|
|
@@ -112,22 +112,21 @@ function getFocusables(container = document.body, options = {}) {
|
|
|
112
112
|
child && traverse2(child);
|
|
113
113
|
}
|
|
114
114
|
} else {
|
|
115
|
-
const
|
|
115
|
+
const candidates = container.querySelectorAll(
|
|
116
116
|
skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX : FOCUSABLE_SELECTOR
|
|
117
117
|
);
|
|
118
|
-
for (let i = 0, l =
|
|
119
|
-
const
|
|
120
|
-
if (
|
|
118
|
+
for (let i = 0, l = candidates.length; i < l; i++) {
|
|
119
|
+
const candidate = candidates[i];
|
|
120
|
+
if (candidate && isFocusable(candidate, {
|
|
121
121
|
skipNegativeTabIndexCheck,
|
|
122
122
|
skipVisibilityCheck
|
|
123
123
|
})) {
|
|
124
|
-
|
|
124
|
+
elements[elements.length] = candidate;
|
|
125
125
|
}
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
);
|
|
128
|
+
const filtered = filter ? elements.filter(filter) : elements;
|
|
129
|
+
return normalizeRadioGroup(sortByTabIndex(filtered));
|
|
131
130
|
}
|
|
132
131
|
function isFocusable(element, options = {}) {
|
|
133
132
|
if (!(element instanceof Element)) {
|
|
@@ -460,16 +459,16 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
460
459
|
if (!(active instanceof Element)) {
|
|
461
460
|
return;
|
|
462
461
|
}
|
|
463
|
-
const
|
|
462
|
+
const current = this.#getFocusables().filter(
|
|
464
463
|
(focusable2) => this.#focusables.has(focusable2)
|
|
465
464
|
);
|
|
466
|
-
if (!
|
|
465
|
+
if (!current.includes(active)) {
|
|
467
466
|
return;
|
|
468
467
|
}
|
|
469
468
|
event.preventDefault();
|
|
470
|
-
const
|
|
469
|
+
const currentIndex = current.indexOf(active);
|
|
471
470
|
let newIndex;
|
|
472
|
-
let target =
|
|
471
|
+
let target = current;
|
|
473
472
|
switch (key) {
|
|
474
473
|
case "End":
|
|
475
474
|
newIndex = -1;
|
|
@@ -479,26 +478,25 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
479
478
|
break;
|
|
480
479
|
case "ArrowLeft":
|
|
481
480
|
case "ArrowUp": {
|
|
482
|
-
const rawIndex =
|
|
481
|
+
const rawIndex = currentIndex - 1;
|
|
483
482
|
newIndex = wrap ? rawIndex : Math.max(rawIndex, 0);
|
|
484
483
|
break;
|
|
485
484
|
}
|
|
486
485
|
case "ArrowRight":
|
|
487
486
|
case "ArrowDown": {
|
|
488
|
-
const rawIndex =
|
|
489
|
-
|
|
490
|
-
newIndex = wrap ? rawIndex % length : Math.min(rawIndex, length - 1);
|
|
487
|
+
const rawIndex = currentIndex + 1;
|
|
488
|
+
newIndex = wrap ? rawIndex % current.length : Math.min(rawIndex, current.length - 1);
|
|
491
489
|
break;
|
|
492
490
|
}
|
|
493
491
|
default: {
|
|
494
492
|
const focusables = new Set(
|
|
495
493
|
this.#focusablesByFirstChar.get(key.toUpperCase()) ?? []
|
|
496
494
|
);
|
|
497
|
-
target =
|
|
498
|
-
const
|
|
499
|
-
(focusable2) =>
|
|
495
|
+
target = current.filter((focusable2) => focusables.has(focusable2));
|
|
496
|
+
const foundIndex = target.findIndex(
|
|
497
|
+
(focusable2) => current.indexOf(focusable2) > currentIndex
|
|
500
498
|
);
|
|
501
|
-
newIndex =
|
|
499
|
+
newIndex = foundIndex >= 0 ? foundIndex : 0;
|
|
502
500
|
}
|
|
503
501
|
}
|
|
504
502
|
const focusable = target.at(newIndex);
|
|
@@ -585,7 +583,7 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
585
583
|
* Lightweight roving tabindex utility with fully focus management.
|
|
586
584
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
587
585
|
*
|
|
588
|
-
* @version 3.1.
|
|
586
|
+
* @version 3.1.16
|
|
589
587
|
* @author Yusuke Kamiyamane
|
|
590
588
|
* @license MIT
|
|
591
589
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -610,7 +608,7 @@ power-focusable/dist/index.js:
|
|
|
610
608
|
* High-precision focus management utility with full composed tree support.
|
|
611
609
|
* Handles complex focus rules including tabindex ordering, radio groups, inert.
|
|
612
610
|
*
|
|
613
|
-
* @version 4.3.
|
|
611
|
+
* @version 4.3.20
|
|
614
612
|
* @author Yusuke Kamiyamane
|
|
615
613
|
* @license MIT
|
|
616
614
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.bundle.js
CHANGED
|
@@ -89,14 +89,14 @@ function getFocusables(container = document.body, options = {}) {
|
|
|
89
89
|
console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
|
|
90
90
|
skipVisibilityCheck = false;
|
|
91
91
|
}
|
|
92
|
-
const
|
|
92
|
+
const elements = [];
|
|
93
93
|
if (composed || include) {
|
|
94
94
|
let traverse2 = function(node) {
|
|
95
95
|
if (isFocusable(node, {
|
|
96
96
|
skipNegativeTabIndexCheck,
|
|
97
97
|
skipVisibilityCheck
|
|
98
98
|
}) || include?.(node)) {
|
|
99
|
-
|
|
99
|
+
elements[elements.length] = node;
|
|
100
100
|
}
|
|
101
101
|
const children2 = composed ? getComposedChildren(node) : getChildren(node);
|
|
102
102
|
for (let i = 0, l = children2.length; i < l; i++) {
|
|
@@ -110,22 +110,21 @@ function getFocusables(container = document.body, options = {}) {
|
|
|
110
110
|
child && traverse2(child);
|
|
111
111
|
}
|
|
112
112
|
} else {
|
|
113
|
-
const
|
|
113
|
+
const candidates = container.querySelectorAll(
|
|
114
114
|
skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX : FOCUSABLE_SELECTOR
|
|
115
115
|
);
|
|
116
|
-
for (let i = 0, l =
|
|
117
|
-
const
|
|
118
|
-
if (
|
|
116
|
+
for (let i = 0, l = candidates.length; i < l; i++) {
|
|
117
|
+
const candidate = candidates[i];
|
|
118
|
+
if (candidate && isFocusable(candidate, {
|
|
119
119
|
skipNegativeTabIndexCheck,
|
|
120
120
|
skipVisibilityCheck
|
|
121
121
|
})) {
|
|
122
|
-
|
|
122
|
+
elements[elements.length] = candidate;
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
125
|
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
);
|
|
126
|
+
const filtered = filter ? elements.filter(filter) : elements;
|
|
127
|
+
return normalizeRadioGroup(sortByTabIndex(filtered));
|
|
129
128
|
}
|
|
130
129
|
function isFocusable(element, options = {}) {
|
|
131
130
|
if (!(element instanceof Element)) {
|
|
@@ -458,16 +457,16 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
458
457
|
if (!(active instanceof Element)) {
|
|
459
458
|
return;
|
|
460
459
|
}
|
|
461
|
-
const
|
|
460
|
+
const current = this.#getFocusables().filter(
|
|
462
461
|
(focusable2) => this.#focusables.has(focusable2)
|
|
463
462
|
);
|
|
464
|
-
if (!
|
|
463
|
+
if (!current.includes(active)) {
|
|
465
464
|
return;
|
|
466
465
|
}
|
|
467
466
|
event.preventDefault();
|
|
468
|
-
const
|
|
467
|
+
const currentIndex = current.indexOf(active);
|
|
469
468
|
let newIndex;
|
|
470
|
-
let target =
|
|
469
|
+
let target = current;
|
|
471
470
|
switch (key) {
|
|
472
471
|
case "End":
|
|
473
472
|
newIndex = -1;
|
|
@@ -477,26 +476,25 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
477
476
|
break;
|
|
478
477
|
case "ArrowLeft":
|
|
479
478
|
case "ArrowUp": {
|
|
480
|
-
const rawIndex =
|
|
479
|
+
const rawIndex = currentIndex - 1;
|
|
481
480
|
newIndex = wrap ? rawIndex : Math.max(rawIndex, 0);
|
|
482
481
|
break;
|
|
483
482
|
}
|
|
484
483
|
case "ArrowRight":
|
|
485
484
|
case "ArrowDown": {
|
|
486
|
-
const rawIndex =
|
|
487
|
-
|
|
488
|
-
newIndex = wrap ? rawIndex % length : Math.min(rawIndex, length - 1);
|
|
485
|
+
const rawIndex = currentIndex + 1;
|
|
486
|
+
newIndex = wrap ? rawIndex % current.length : Math.min(rawIndex, current.length - 1);
|
|
489
487
|
break;
|
|
490
488
|
}
|
|
491
489
|
default: {
|
|
492
490
|
const focusables = new Set(
|
|
493
491
|
this.#focusablesByFirstChar.get(key.toUpperCase()) ?? []
|
|
494
492
|
);
|
|
495
|
-
target =
|
|
496
|
-
const
|
|
497
|
-
(focusable2) =>
|
|
493
|
+
target = current.filter((focusable2) => focusables.has(focusable2));
|
|
494
|
+
const foundIndex = target.findIndex(
|
|
495
|
+
(focusable2) => current.indexOf(focusable2) > currentIndex
|
|
498
496
|
);
|
|
499
|
-
newIndex =
|
|
497
|
+
newIndex = foundIndex >= 0 ? foundIndex : 0;
|
|
500
498
|
}
|
|
501
499
|
}
|
|
502
500
|
const focusable = target.at(newIndex);
|
|
@@ -583,7 +581,7 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
583
581
|
* Lightweight roving tabindex utility with fully focus management.
|
|
584
582
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
585
583
|
*
|
|
586
|
-
* @version 3.1.
|
|
584
|
+
* @version 3.1.16
|
|
587
585
|
* @author Yusuke Kamiyamane
|
|
588
586
|
* @license MIT
|
|
589
587
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -608,7 +606,7 @@ power-focusable/dist/index.js:
|
|
|
608
606
|
* High-precision focus management utility with full composed tree support.
|
|
609
607
|
* Handles complex focus rules including tabindex ordering, radio groups, inert.
|
|
610
608
|
*
|
|
611
|
-
* @version 4.3.
|
|
609
|
+
* @version 4.3.20
|
|
612
610
|
* @author Yusuke Kamiyamane
|
|
613
611
|
* @license MIT
|
|
614
612
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.cjs
CHANGED
|
@@ -145,16 +145,16 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
145
145
|
if (!(active instanceof Element)) {
|
|
146
146
|
return;
|
|
147
147
|
}
|
|
148
|
-
const
|
|
148
|
+
const current = this.#getFocusables().filter(
|
|
149
149
|
(focusable2) => this.#focusables.has(focusable2)
|
|
150
150
|
);
|
|
151
|
-
if (!
|
|
151
|
+
if (!current.includes(active)) {
|
|
152
152
|
return;
|
|
153
153
|
}
|
|
154
154
|
event.preventDefault();
|
|
155
|
-
const
|
|
155
|
+
const currentIndex = current.indexOf(active);
|
|
156
156
|
let newIndex;
|
|
157
|
-
let target =
|
|
157
|
+
let target = current;
|
|
158
158
|
switch (key) {
|
|
159
159
|
case "End":
|
|
160
160
|
newIndex = -1;
|
|
@@ -164,26 +164,25 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
164
164
|
break;
|
|
165
165
|
case "ArrowLeft":
|
|
166
166
|
case "ArrowUp": {
|
|
167
|
-
const rawIndex =
|
|
167
|
+
const rawIndex = currentIndex - 1;
|
|
168
168
|
newIndex = wrap ? rawIndex : Math.max(rawIndex, 0);
|
|
169
169
|
break;
|
|
170
170
|
}
|
|
171
171
|
case "ArrowRight":
|
|
172
172
|
case "ArrowDown": {
|
|
173
|
-
const rawIndex =
|
|
174
|
-
|
|
175
|
-
newIndex = wrap ? rawIndex % length : Math.min(rawIndex, length - 1);
|
|
173
|
+
const rawIndex = currentIndex + 1;
|
|
174
|
+
newIndex = wrap ? rawIndex % current.length : Math.min(rawIndex, current.length - 1);
|
|
176
175
|
break;
|
|
177
176
|
}
|
|
178
177
|
default: {
|
|
179
178
|
const focusables = new Set(
|
|
180
179
|
this.#focusablesByFirstChar.get(key.toUpperCase()) ?? []
|
|
181
180
|
);
|
|
182
|
-
target =
|
|
183
|
-
const
|
|
184
|
-
(focusable2) =>
|
|
181
|
+
target = current.filter((focusable2) => focusables.has(focusable2));
|
|
182
|
+
const foundIndex = target.findIndex(
|
|
183
|
+
(focusable2) => current.indexOf(focusable2) > currentIndex
|
|
185
184
|
);
|
|
186
|
-
newIndex =
|
|
185
|
+
newIndex = foundIndex >= 0 ? foundIndex : 0;
|
|
187
186
|
}
|
|
188
187
|
}
|
|
189
188
|
const focusable = target.at(newIndex);
|
|
@@ -270,7 +269,7 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
270
269
|
* Lightweight roving tabindex utility with fully focus management.
|
|
271
270
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
272
271
|
*
|
|
273
|
-
* @version 3.1.
|
|
272
|
+
* @version 3.1.16
|
|
274
273
|
* @author Yusuke Kamiyamane
|
|
275
274
|
* @license MIT
|
|
276
275
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.d.cts
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Lightweight roving tabindex utility with fully focus management.
|
|
4
4
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
5
5
|
*
|
|
6
|
-
* @version 3.1.
|
|
6
|
+
* @version 3.1.16
|
|
7
7
|
* @author Yusuke Kamiyamane
|
|
8
8
|
* @license MIT
|
|
9
9
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Lightweight roving tabindex utility with fully focus management.
|
|
4
4
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
5
5
|
*
|
|
6
|
-
* @version 3.1.
|
|
6
|
+
* @version 3.1.16
|
|
7
7
|
* @author Yusuke Kamiyamane
|
|
8
8
|
* @license MIT
|
|
9
9
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/dist/index.js
CHANGED
|
@@ -143,16 +143,16 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
143
143
|
if (!(active instanceof Element)) {
|
|
144
144
|
return;
|
|
145
145
|
}
|
|
146
|
-
const
|
|
146
|
+
const current = this.#getFocusables().filter(
|
|
147
147
|
(focusable2) => this.#focusables.has(focusable2)
|
|
148
148
|
);
|
|
149
|
-
if (!
|
|
149
|
+
if (!current.includes(active)) {
|
|
150
150
|
return;
|
|
151
151
|
}
|
|
152
152
|
event.preventDefault();
|
|
153
|
-
const
|
|
153
|
+
const currentIndex = current.indexOf(active);
|
|
154
154
|
let newIndex;
|
|
155
|
-
let target =
|
|
155
|
+
let target = current;
|
|
156
156
|
switch (key) {
|
|
157
157
|
case "End":
|
|
158
158
|
newIndex = -1;
|
|
@@ -162,26 +162,25 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
162
162
|
break;
|
|
163
163
|
case "ArrowLeft":
|
|
164
164
|
case "ArrowUp": {
|
|
165
|
-
const rawIndex =
|
|
165
|
+
const rawIndex = currentIndex - 1;
|
|
166
166
|
newIndex = wrap ? rawIndex : Math.max(rawIndex, 0);
|
|
167
167
|
break;
|
|
168
168
|
}
|
|
169
169
|
case "ArrowRight":
|
|
170
170
|
case "ArrowDown": {
|
|
171
|
-
const rawIndex =
|
|
172
|
-
|
|
173
|
-
newIndex = wrap ? rawIndex % length : Math.min(rawIndex, length - 1);
|
|
171
|
+
const rawIndex = currentIndex + 1;
|
|
172
|
+
newIndex = wrap ? rawIndex % current.length : Math.min(rawIndex, current.length - 1);
|
|
174
173
|
break;
|
|
175
174
|
}
|
|
176
175
|
default: {
|
|
177
176
|
const focusables = new Set(
|
|
178
177
|
this.#focusablesByFirstChar.get(key.toUpperCase()) ?? []
|
|
179
178
|
);
|
|
180
|
-
target =
|
|
181
|
-
const
|
|
182
|
-
(focusable2) =>
|
|
179
|
+
target = current.filter((focusable2) => focusables.has(focusable2));
|
|
180
|
+
const foundIndex = target.findIndex(
|
|
181
|
+
(focusable2) => current.indexOf(focusable2) > currentIndex
|
|
183
182
|
);
|
|
184
|
-
newIndex =
|
|
183
|
+
newIndex = foundIndex >= 0 ? foundIndex : 0;
|
|
185
184
|
}
|
|
186
185
|
}
|
|
187
186
|
const focusable = target.at(newIndex);
|
|
@@ -268,7 +267,7 @@ var RovingTabIndex = class _RovingTabIndex {
|
|
|
268
267
|
* Lightweight roving tabindex utility with fully focus management.
|
|
269
268
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
270
269
|
*
|
|
271
|
-
* @version 3.1.
|
|
270
|
+
* @version 3.1.16
|
|
272
271
|
* @author Yusuke Kamiyamane
|
|
273
272
|
* @license MIT
|
|
274
273
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@y14e/roving-tabindex",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.16",
|
|
4
4
|
"description": "Lightweight roving tabindex utility with fully focus management",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -57,6 +57,6 @@
|
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
59
|
"@y14e/attributes-utils": "^1.1.3",
|
|
60
|
-
"power-focusable": "^4.3.
|
|
60
|
+
"power-focusable": "^4.3.20"
|
|
61
61
|
}
|
|
62
62
|
}
|