Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
The tabbable npm package is used to identify DOM elements that are tabbable or focusable. This is useful for accessibility concerns, such as when creating keyboard navigation or managing focus within modal dialogs, dropdowns, and custom widgets. It helps ensure that keyboard users can navigate through all interactive elements on the page in a logical order.
Finding all tabbable elements
This feature allows you to get a list of all elements that are tabbable (can be focused using the Tab key) within a specified DOM node.
var tabbable = require('tabbable');
var tabbableElements = tabbable(document);
console.log(tabbableElements);
Finding all focusable elements
This feature provides a list of all elements that are focusable, including those that are not tabbable but can still receive focus, such as elements with a tabindex='-1'. The option `{ includeContainer: true }` includes the container itself if it is focusable.
var tabbable = require('tabbable');
var focusableElements = tabbable(document, { includeContainer: true });
console.log(focusableElements);
The focus-trap package is designed to trap focus within a DOM element, preventing the user from tabbing out of it. This is particularly useful for modal dialogs. It is similar to tabbable in that it deals with focus management, but it provides a higher-level API specifically for creating a focus trap rather than just identifying focusable elements.
ally.js is a JavaScript library that simplifies certain accessibility features, including focus management. It provides a broader range of accessibility utilities compared to tabbable, including the ability to find and manipulate focusable elements, but also extends to other areas such as accessible hiding of elements and maintaining disabled state across shadow DOM boundaries.
Returns an array of all tabbable DOM nodes within a containing node, in their actual tab order (cf. Sequential focus navigation and the tabindex attribute).
This should include
<input>
s,<select>
s,<textarea>
s,<button>
s,<a>
s with href
attributes or non-negative tabindex
es,tabindex
Any of the above will not be added to the array, though, if any of the following are also true about it:
tabindex
disabled
display: none
or visibility: hidden
Basically IE9+. See .zuul.yml
for more details.
Why? It uses Element.querySelectorAll() and Window.getComputedStyle().
Automated testing is done with zuul and Open Suace.
npm install tabbable
Dependencies: none.
You'll need to be compiling CommonJS (via browserify or webpack).
var tabbable = require('tabbable');
var arrayOfTabbableNodesInFoo = tabbable(document.getElementById('foo'));
Summary of ordering principles:
tabindex
attributes (1 or higher), ordered by ascending tabindex
and source order.tabindex
and any element that by default receives focus (listed above) and does not have a positive tabindex
set, in source order.:tabbable
selectorDoesn't need jQuery. Also: doesn't support all the old IE's.
Also: The array accounts for actual tab order.
Also: jQuery UI's :tabbable
selector ignores elements with height and width of 0
. I'm not sure why — because I've found that I can still tab to those elements. So I kept them in. Only elements hidden with display: none
or visibility: hidden
are left out.
Also: This plugin ignores the rarely used <area>
and <object>
elements, which are focusable in some circumstances. (If you need them, maybe PR?)
Feedback more than welcome!
Lint with npm run lint
.
Test with npm run test-dev
, which will give you a URL to open in your browser. Look at the console log for TAP output.
FAQs
Returns an array of all tabbable DOM nodes within a containing node.
We found that tabbable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.