@y14e/roving-tabindex 2.0.8 → 2.1.0
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 +9 -4
- package/dist/index.cjs +14 -4
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +14 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,14 +10,14 @@ npm i @y14e/roving-tabindex
|
|
|
10
10
|
|
|
11
11
|
```ts
|
|
12
12
|
// npm
|
|
13
|
-
import { createRovingTabIndex } from '@y14e/roving-tabindex@2.0
|
|
13
|
+
import { createRovingTabIndex } from '@y14e/roving-tabindex@2.1.0';
|
|
14
14
|
|
|
15
15
|
// CDNs
|
|
16
|
-
import { createRovingTabIndex } from 'https://esm.sh/@y14e/roving-tabindex@2.0
|
|
16
|
+
import { createRovingTabIndex } from 'https://esm.sh/@y14e/roving-tabindex@2.1.0';
|
|
17
17
|
// or
|
|
18
|
-
import { createRovingTabIndex } from 'https://cdn.jsdelivr.net/npm/@y14e/roving-tabindex@2.0
|
|
18
|
+
import { createRovingTabIndex } from 'https://cdn.jsdelivr.net/npm/@y14e/roving-tabindex@2.1.0/+esm';
|
|
19
19
|
// or
|
|
20
|
-
import { createRovingTabIndex } from 'https://esm.unpkg.com/@y14e/roving-tabindex@2.0
|
|
20
|
+
import { createRovingTabIndex } from 'https://esm.unpkg.com/@y14e/roving-tabindex@2.1.0';
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
## 📦 APIs
|
|
@@ -40,6 +40,7 @@ const cleanup = createRovingTabIndex(container, options);
|
|
|
40
40
|
interface RovingTabIndexOptions {
|
|
41
41
|
direction?: 'horizontal' | 'vertical'; // default: both (undefined)
|
|
42
42
|
navigationOnly?: boolean; // default: false
|
|
43
|
+
noMemory?: boolean; // default: false
|
|
43
44
|
selector?: string;
|
|
44
45
|
typeahead?: boolean; // default: false
|
|
45
46
|
wrap?: boolean; // default: false
|
|
@@ -50,6 +51,10 @@ interface RovingTabIndexOptions {
|
|
|
50
51
|
|
|
51
52
|
If `true`, enables keyboard navigation without modifying `tabindex`. Useful for widgets like accordions where all items should remain tabbable while still supporting arrow key navigation.
|
|
52
53
|
|
|
54
|
+
### `noMemory`
|
|
55
|
+
|
|
56
|
+
If `true`, disables focus memory. Focus always starts from the first item.
|
|
57
|
+
|
|
53
58
|
### `typeahead`
|
|
54
59
|
|
|
55
60
|
If `true`, enables character-based focus navigation. Typing a character moves focus to the next matching element.
|
package/dist/index.cjs
CHANGED
|
@@ -299,6 +299,7 @@ function createRovingTabIndex(container, options = {}) {
|
|
|
299
299
|
let {
|
|
300
300
|
direction,
|
|
301
301
|
navigationOnly = false,
|
|
302
|
+
noMemory = false,
|
|
302
303
|
selector,
|
|
303
304
|
typeahead = false,
|
|
304
305
|
wrap = false
|
|
@@ -311,6 +312,10 @@ function createRovingTabIndex(container, options = {}) {
|
|
|
311
312
|
console.warn("Invalid navigationOnly option. Fallback: false.");
|
|
312
313
|
navigationOnly = false;
|
|
313
314
|
}
|
|
315
|
+
if (typeof noMemory !== "boolean") {
|
|
316
|
+
console.warn("Invalid noMemory option. Fallback: false.");
|
|
317
|
+
noMemory = false;
|
|
318
|
+
}
|
|
314
319
|
if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
|
|
315
320
|
console.warn(
|
|
316
321
|
"Invalid selector. Fallback: all focusable elements (undefined)."
|
|
@@ -325,7 +330,7 @@ function createRovingTabIndex(container, options = {}) {
|
|
|
325
330
|
console.warn("Invalid wrap option. Fallback: false.");
|
|
326
331
|
wrap = false;
|
|
327
332
|
}
|
|
328
|
-
const settings = { navigationOnly, typeahead, wrap };
|
|
333
|
+
const settings = { navigationOnly, noMemory, typeahead, wrap };
|
|
329
334
|
direction && Object.assign(settings, { direction });
|
|
330
335
|
selector && Object.assign(settings, { selector });
|
|
331
336
|
const roving = new RovingTabIndex(container, settings);
|
|
@@ -373,10 +378,15 @@ var RovingTabIndex = class {
|
|
|
373
378
|
}
|
|
374
379
|
#onFocusIn = (event) => {
|
|
375
380
|
const { target } = event;
|
|
376
|
-
if (!(target instanceof Element)
|
|
381
|
+
if (!(target instanceof Element)) {
|
|
382
|
+
return;
|
|
383
|
+
}
|
|
384
|
+
const isFocusable2 = this.#focusables.has(target);
|
|
385
|
+
if (this.#options.noMemory && !isFocusable2) {
|
|
386
|
+
this.#update(null);
|
|
377
387
|
return;
|
|
378
388
|
}
|
|
379
|
-
this.#update(target);
|
|
389
|
+
isFocusable2 && this.#update(target);
|
|
380
390
|
};
|
|
381
391
|
#onKeyDown = (event) => {
|
|
382
392
|
if (!event.composedPath().includes(this.#container)) {
|
|
@@ -526,7 +536,7 @@ function getActiveElement() {
|
|
|
526
536
|
* Lightweight roving tabindex utility with fully focus management.
|
|
527
537
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
528
538
|
*
|
|
529
|
-
* @version 2.0
|
|
539
|
+
* @version 2.1.0
|
|
530
540
|
* @author Yusuke Kamiyamane
|
|
531
541
|
* @license MIT
|
|
532
542
|
* @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 2.0
|
|
6
|
+
* @version 2.1.0
|
|
7
7
|
* @author Yusuke Kamiyamane
|
|
8
8
|
* @license MIT
|
|
9
9
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
interface RovingTabIndexOptions {
|
|
13
13
|
readonly direction?: 'horizontal' | 'vertical';
|
|
14
14
|
readonly navigationOnly?: boolean;
|
|
15
|
+
readonly noMemory?: boolean;
|
|
15
16
|
readonly selector?: string;
|
|
16
17
|
readonly typeahead?: boolean;
|
|
17
18
|
readonly wrap?: boolean;
|
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 2.0
|
|
6
|
+
* @version 2.1.0
|
|
7
7
|
* @author Yusuke Kamiyamane
|
|
8
8
|
* @license MIT
|
|
9
9
|
* @copyright Copyright (c) Yusuke Kamiyamane
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
interface RovingTabIndexOptions {
|
|
13
13
|
readonly direction?: 'horizontal' | 'vertical';
|
|
14
14
|
readonly navigationOnly?: boolean;
|
|
15
|
+
readonly noMemory?: boolean;
|
|
15
16
|
readonly selector?: string;
|
|
16
17
|
readonly typeahead?: boolean;
|
|
17
18
|
readonly wrap?: boolean;
|
package/dist/index.js
CHANGED
|
@@ -297,6 +297,7 @@ function createRovingTabIndex(container, options = {}) {
|
|
|
297
297
|
let {
|
|
298
298
|
direction,
|
|
299
299
|
navigationOnly = false,
|
|
300
|
+
noMemory = false,
|
|
300
301
|
selector,
|
|
301
302
|
typeahead = false,
|
|
302
303
|
wrap = false
|
|
@@ -309,6 +310,10 @@ function createRovingTabIndex(container, options = {}) {
|
|
|
309
310
|
console.warn("Invalid navigationOnly option. Fallback: false.");
|
|
310
311
|
navigationOnly = false;
|
|
311
312
|
}
|
|
313
|
+
if (typeof noMemory !== "boolean") {
|
|
314
|
+
console.warn("Invalid noMemory option. Fallback: false.");
|
|
315
|
+
noMemory = false;
|
|
316
|
+
}
|
|
312
317
|
if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
|
|
313
318
|
console.warn(
|
|
314
319
|
"Invalid selector. Fallback: all focusable elements (undefined)."
|
|
@@ -323,7 +328,7 @@ function createRovingTabIndex(container, options = {}) {
|
|
|
323
328
|
console.warn("Invalid wrap option. Fallback: false.");
|
|
324
329
|
wrap = false;
|
|
325
330
|
}
|
|
326
|
-
const settings = { navigationOnly, typeahead, wrap };
|
|
331
|
+
const settings = { navigationOnly, noMemory, typeahead, wrap };
|
|
327
332
|
direction && Object.assign(settings, { direction });
|
|
328
333
|
selector && Object.assign(settings, { selector });
|
|
329
334
|
const roving = new RovingTabIndex(container, settings);
|
|
@@ -371,10 +376,15 @@ var RovingTabIndex = class {
|
|
|
371
376
|
}
|
|
372
377
|
#onFocusIn = (event) => {
|
|
373
378
|
const { target } = event;
|
|
374
|
-
if (!(target instanceof Element)
|
|
379
|
+
if (!(target instanceof Element)) {
|
|
380
|
+
return;
|
|
381
|
+
}
|
|
382
|
+
const isFocusable2 = this.#focusables.has(target);
|
|
383
|
+
if (this.#options.noMemory && !isFocusable2) {
|
|
384
|
+
this.#update(null);
|
|
375
385
|
return;
|
|
376
386
|
}
|
|
377
|
-
this.#update(target);
|
|
387
|
+
isFocusable2 && this.#update(target);
|
|
378
388
|
};
|
|
379
389
|
#onKeyDown = (event) => {
|
|
380
390
|
if (!event.composedPath().includes(this.#container)) {
|
|
@@ -524,7 +534,7 @@ function getActiveElement() {
|
|
|
524
534
|
* Lightweight roving tabindex utility with fully focus management.
|
|
525
535
|
* Designed for accessible menus, tabs, toolbars, and composite widgets.
|
|
526
536
|
*
|
|
527
|
-
* @version 2.0
|
|
537
|
+
* @version 2.1.0
|
|
528
538
|
* @author Yusuke Kamiyamane
|
|
529
539
|
* @license MIT
|
|
530
540
|
* @copyright Copyright (c) Yusuke Kamiyamane
|