Usage
import { getFocusableElements } from 'ngwr/utils';
const els = getFocusableElements(menuRef.nativeElement);
els[0]?.focus(); // move focus to the first interactive childWhy ngwr provides this
The textbook querySelectorAll('button, [href], …') misses [contenteditable], ignores visibility (returns display:none nodes), doesn't honour explicit tabindex order, and includes disabled controls. Getting accessible focus management right means handling all four — easier to share one helper than copy-paste the selector + filter + sort into every dialog.
// Native — the obvious one-liner misses several cases.
const els = root.querySelectorAll<HTMLElement>(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
// → misses [contenteditable], doesn't filter invisible elements,
// doesn't honour tabindex order, returns disabled controls.
// ngwr — selector + visibility filter + tabindex sort, all included.
const els = getFocusableElements(root);API
| Name | Description | Type | Default |
|---|---|---|---|
getFocusableElements(root) | Returns every focusable descendant of root in DOM order, filtered for visibility and tabindex-disabled elements. | (root: HTMLElement) => readonly HTMLElement[] | — |