# getFocusableElements

> Enumerate focusable descendants of an element in DOM order. The visibility filter skips `display:none` / `visibility:hidden` / `tabindex='-1'` nodes so the result reflects what the user can actually tab to.

Source: https://ngwr.dev/reference/utils/get-focusable-elements  
Kind: Util

## Usage

```angular-ts
import { getFocusableElements } from 'ngwr/utils';

const els = getFocusableElements(menuRef.nativeElement);
els[0]?.focus();   // move focus to the first interactive child
```

## Why 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.

```angular-ts
// 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[]` | `—` |