https://github.com/accessible-ui/tabbable
🅰 Returns an array of all tabbable DOM nodes within a containing node.
https://github.com/accessible-ui/tabbable
Last synced: 2 months ago
JSON representation
🅰 Returns an array of all tabbable DOM nodes within a containing node.
- Host: GitHub
- URL: https://github.com/accessible-ui/tabbable
- Owner: accessible-ui
- License: mit
- Created: 2019-12-16T01:41:20.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:21:11.000Z (over 2 years ago)
- Last Synced: 2025-03-17T19:47:31.571Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 2.46 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
tabbable()
npm i @accessible/tabbable
Returns an array of all\* tabbable DOM nodes within a containing node. (\* "all" has some necessary caveats, which you'll learn about by reading below.)
The following are considered tabbable:
- ``
- ``
- ``
- ``
- `` with `href` or `xlink:href` attributes
- `` and `` with `controls` attributes
- `[contenteditable]` elements
- anything with a non-negative `tabindex`
Any of the above will _not_ be considered tabbable, though, if any of the following are also true about it:
- negative `tabindex`
- `disabled`
- either the node itself _or an ancestor of it_ is hidden via `display: none` or `visibility: hidden`
- it's an `` and a different radio in its group is `checked`
**If you think a node should be included in your array of tabbables _but it's not_, all you need to do is add `tabindex="0"` to deliberately include it.** (Or if it is in your array but you don't want it, you can add `tabindex="-1"` to deliberately exclude it.) This will also result in more consistent cross-browser behavior. For information about why your special node might _not_ be included, see ["More details"](#more-details), below.
## API
### `tabbable(rootNode: HTMLElement, includeRootNode: boolean = false): HTMLElement[]`
Returns an array of ordered tabbable node within the `rootNode`.
Summary of ordering principles:
- First include any nodes with positive `tabindex` attributes (1 or higher), ordered by ascending `tabindex` and source order.
- Then include any nodes with a zero `tabindex` and any element that by default receives focus (listed above) and does not have a positive `tabindex` set, in source order.
## More details
- **Tabbable tries to identify elements that are reliably tabbable across (not dead) browsers.** Browsers are stupidly inconsistent in their behavior, though — especially for edge-case elements like `` and `` — so this means _some_ elements that you _can_ tab to in _some_ browsers will be left out of the results. (To learn more about that stupid inconsistency, see this [amazing table](https://allyjs.io/data-tables/focusable.html)). To provide better consistency across browsers and ensure the elements you _want_ in your tabbables list show up there, **try adding `tabindex="0"` to edge-case elements that Tabbable ignores**.
- (Exemplifying the above ^^:) **The tabbability of ``, ``, ``, ``, and `` is [inconsistent across browsers](https://allyjs.io/data-tables/focusable.html)**, so if you need an accurate read on one of these elements you should try giving it a `tabindex`. (You'll also need to pay attention to the `focusable` attribute on SVGs in IE & Edge.) But you also might _not_ be able to get an accurate read — so you should avoid relying on it.
- **Radio groups have some edge cases, which you can avoid by always having a `checked` one in each group** (and that is what you should usually do anyway). If there is no `checked` radio in the radio group, _all_ of the radios will be considered tabbable. (Some browsers do this, otherwise don't — there's not consistency.)
- Although Tabbable tries to deal with positive tabindexes, **you should not use positive tabindexes**. Accessibility experts seem to be in (rare) unanimous and clear consent about this: rely on the order of elements in the document.
- Safari on Mac OS X does not Tab to `` elements by default: you have to change a setting to get the standard behavior. Tabbable does not know whether you've changed that setting or not, so it will include `` elements in its list.
## Why fork?
The creator is looking for a new maintainer and `@accessibile` packages don't need some of the features
in the original, so I can make a smaller package with TypeScript types by forking :P
## Credit
This library is forked from [tabbable](https://github.com/davidtheclark/tabbable)
## LICENSE
MIT