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:

-
-
-
- </code><br />- <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><a></code> with <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">href</code> or <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">xlink:href</code> attributes<br />- <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><audio></code> and <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><videos></code> with <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">controls</code> attributes<br />- <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">[contenteditable]</code> elements<br />- anything with a non-negative <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tabindex</code></p><p class="my-3">Any of the above will _not_ be considered tabbable, though, if any of the following are also true about it:</p><p class="my-3">- negative <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tabindex</code><br />- <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">disabled</code><br />- either the node itself _or an ancestor of it_ is hidden via <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">display: none</code> or <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">visibility: hidden</code><br />- it's an <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><input type="radio"></code> and a different radio in its group is <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">checked</code></p><p class="my-3"><strong>If you think a node should be included in your array of tabbables _but it's not_, all you need to do is add <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tabindex="0"</code> to deliberately include it.</strong> (Or if it is in your array but you don't want it, you can add <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tabindex="-1"</code> 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 <a href="#more-details" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">"More details"</a>, below.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">API</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Returns an array of ordered tabbable node within the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">rootNode</code>.</p><p class="my-3">Summary of ordering principles:</p><p class="my-3">- First include any nodes with positive <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tabindex</code> attributes (1 or higher), ordered by ascending <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tabindex</code> and source order.<br />- Then include any nodes with a zero <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tabindex</code> and any element that by default receives focus (listed above) and does not have a positive <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tabindex</code> set, in source order.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">More details</h2></p><p class="my-3">- <strong>Tabbable tries to identify elements that are reliably tabbable across (not dead) browsers.</strong> Browsers are stupidly inconsistent in their behavior, though — especially for edge-case elements like <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><object></code> and <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><iframe></code> — 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 <a href="https://allyjs.io/data-tables/focusable.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">amazing table</a>). To provide better consistency across browsers and ensure the elements you _want_ in your tabbables list show up there, <strong>try adding <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tabindex="0"</code> to edge-case elements that Tabbable ignores</strong>.<br />- (Exemplifying the above ^^:) <strong>The tabbability of <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><iframe></code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><embed></code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><object></code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><summary></code>, and <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><svg></code> is <a href="https://allyjs.io/data-tables/focusable.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">inconsistent across browsers</a></strong>, so if you need an accurate read on one of these elements you should try giving it a <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tabindex</code>. (You'll also need to pay attention to the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">focusable</code> 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.<br />- <strong>Radio groups have some edge cases, which you can avoid by always having a <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">checked</code> one in each group</strong> (and that is what you should usually do anyway). If there is no <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">checked</code> radio in the radio group, _all_ of the radios will be considered tabbable. (Some browsers do this, otherwise don't — there's not consistency.)<br />- Although Tabbable tries to deal with positive tabindexes, <strong>you should not use positive tabindexes</strong>. Accessibility experts seem to be in (rare) unanimous and clear consent about this: rely on the order of elements in the document.<br />- Safari on Mac OS X does not Tab to <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><a></code> 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 <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><a></code> elements in its list.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Why fork?</h2></p><p class="my-3">The creator is looking for a new maintainer and <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">@accessibile</code> packages don't need some of the features<br />in the original, so I can make a smaller package with TypeScript types by forking :P</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Credit</h2></p><p class="my-3">This library is forked from <a href="https://github.com/davidtheclark/tabbable" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">tabbable</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">LICENSE</h2></p><p class="my-3">MIT<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"26:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n27:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"latest\"}]\n28:[\"$\",\"$L5\",\"babel-jest\",{\"href\":\"/package/babel-jest\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-jest\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"latest\"}]]}]\n29:[\"$\",\"$L5\",\"cli-confirm\",{\"href\":\"/package/cli-confirm\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"cli-confirm\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"latest\"}]]}]\n2a:[\"$\",\"$L5\",\"cz-conventional-changelog\",{\"href\":\"/package/cz-conventional-changelog\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"cz-conventional-changelog\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"latest\"}]]}]\n2b:[\"$\",\"$L5\",\"eslint\",{\"href\":\"/package/eslint\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"eslint\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"latest\"}]]}]\n2c:[\"$\",\"$L5\",\"eslint-config-lunde\",{\"href\":\"/package/eslint-config-lunde\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucid"])</script><script>self.__next_f.push([1,"e lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"eslint-config-lunde\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"latest\"}]]}]\n2d:[\"$\",\"$L5\",\"husky\",{\"href\":\"/package/husky\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"husky\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"latest\"}]]}]\n2e:[\"$\",\"$L5\",\"jest\",{\"href\":\"/package/jest\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"jest\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"latest\"}]]}]\n2f:[\"$\",\"$L5\",\"lint-staged\",{\"href\":\"/package/lint-staged\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"lint-staged\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"latest\"}]]}]\n30:[\"$\",\"$L5\",\"lundle\",{\"href\":\"/package/lundle\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"lundle\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"latest\"}]]}]\n31:[\"$\",\"$L5\",\"prettier\",{\"href\":\"/package/prettier\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLin"])</script><script>self.__next_f.push([1,"ecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"prettier\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"latest\"}]]}]\n32:[\"$\",\"$L5\",\"standard-version\",{\"href\":\"/package/standard-version\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"standard-version\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"latest\"}]]}]\n33:[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"latest\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>