# makeup-focusables

> Returns an array of all focusable descendants of the given element

Latest version **0.5.0** (published 2026-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install makeup-focusables
pnpm add makeup-focusables
yarn add makeup-focusables
bun add makeup-focusables
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2026-03-31 |
| First published | 2017-11-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 47 |
| Author | Ian McBurnie |
| Maintainers | dylanpiercey, sendlo, ianmcburnie, agliga, saiponnada, artblue, lulavalva |
| Keywords | makeup, ebay, accessibility, a11y |

## Links

- npm: https://www.npmjs.com/package/makeup-focusables
- Repository: https://github.com/makeup/makeup-js.git#master
- Homepage: https://github.com/makeup/makeup-js/tree/master#readme
- Issues: https://github.com/makeup/makeup-js/issues
- npm.io page: https://npm.io/package/makeup-focusables

## Recent versions

- 0.5.0 (latest) — 2026-03-31
- 0.4.6 — 2026-01-14
- 0.4.5 — 2025-04-04
- 0.4.4 — 2024-12-20
- 0.4.3 — 2024-10-24
- 0.4.2 — 2024-09-03
- 0.4.1 — 2024-08-27
- 0.4.0 — 2024-06-23
- 0.3.2 — 2024-06-17
- 0.3.1 — 2022-11-26
- 0.3.0 — 2022-02-02
- 0.2.0 — 2021-07-10
- 0.1.0 — 2020-06-08
- 0.0.5 — 2020-03-09
- 0.0.4 — 2019-05-07
- … 3 more at https://npm.io/package/makeup-focusables/versions

## README

# makeup-focusables

Returns an array of all focusable descendants of the given element, excluding elements that are hidden or children of hidden elements.

## Experimental

This module is still in an experimental state, until it reaches v1 you must consider all minor releases as breaking changes.

## Example

Markup:

```html
<div class="widget">
  <h2 tabindex="-1">Widget Title</h2>
  <p>Widget Text</p>
  <button type="button">Widget Button</button>
  <a href="#">Widget Link</a>
</div>
```

```js
import focusables from "makeup-focusables";

// get element reference
const widgetEl = document.querySelector(".widget");

// get array of all focusable elements (keyboard and programmatic)
const allItems = focusables(widgetEl);

console.log(allItems.length); // outputs: 3

// get array of only keyboard focusable elements
const keyboardItems = focusables(widgetEl, true);

console.log(keyboardItems.length); // outputs: 2
```

## Parameters

- `el`: the element to search (default: undefined)
- `keyboardOnly`: return only elements focusable in sequential keyboard navigation (default: false)
- `callback`: if set, will call focusables after `requestAnimationFrame` and will pass the list of focusables in a callback method

## Custom Events

- None

---
_Source: https://npm.io/package/makeup-focusables · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._