# aria-hidden

> Cast aria-hidden to everything, except...

Latest version **1.2.6** (published 2025-05-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install aria-hidden
pnpm add aria-hidden
yarn add aria-hidden
bun add aria-hidden
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

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

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.6 |
| Published | 2025-05-19 |
| First published | 2018-10-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 30.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 63 |
| Author | Anton Korzunov |
| Maintainers | kashey |
| Keywords | DOM, aria, hidden, inert |

## Links

- npm: https://www.npmjs.com/package/aria-hidden
- Repository: https://github.com/theKashey/aria-hidden
- Homepage: https://github.com/theKashey/aria-hidden#readme
- Issues: https://github.com/theKashey/aria-hidden/issues
- npm.io page: https://npm.io/package/aria-hidden

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.2.6 (latest) — 2025-05-19
- 1.2.5 — 2025-05-18
- 1.2.4 — 2024-03-20
- 1.2.3 — 2023-03-04
- 1.2.2 — 2022-11-13
- 1.2.1 — 2022-08-23
- 1.2.0 — 2022-08-21
- 1.1.3 — 2021-05-08
- 1.1.2 — 2021-02-02
- 1.1.1 — 2019-03-09
- 1.1.0 — 2019-03-07
- 1.0.0 — 2018-10-23

## README

# aria-hidden

[![NPM](https://nodei.co/npm/aria-hidden.png?downloads=true&stars=true)](https://nodei.co/npm/aria-hidden/)

Hides from ARIA everything, except provided node(s).

Helps to isolate modal dialogs and focused task - the content will be not accessible using
accessible tools.

Now with [HTML inert](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert) support

# API

Just call `hideOthers` with DOM-node you want to keep, and it will _hide_ everything else.
`targetNode` could be placed anywhere - its siblings would be hidden, but it and its parents - not.

> "hidden" in terms or `aria-hidden`

```js
import { hideOthers } from 'aria-hidden';

const undo = hideOthers(exceptThisDOMnode);
// everything else is "aria-hidden"

// undo changes
undo();
```

you also may limit the effect spread by providing top level node as a second parameter

```js
// keep only `anotherNode` node visible in #app
// the rest of document will be untouched
hideOthers(anotherNode, document.getElementById('app'));
```

> `parentNode` defaults to document.body

# Inert

While `aria-hidden` played important role in the past and will play in the future - the main
use case always was around isolating content and making elements "transparent" not only for aria, but for
user interaction as well.

This is why you might consider using `inertOthers`

```tsx
import { hideOthers, inertOthers, supportsInert } from 'aria-hidden';

// focus on element mean "hide others". Ideally disable interactions
const focusOnElement = (node) => (supportsInert() ? inertOthers(node) : hideOthers(node));
```

the same function as above is already contructed and exported as

```tsx
import { suppressOthers } from 'aria-hidden';

suppressOthers([keepThisNode, andThis]);
```

⚠️ Note - inert **will disable any interactions** with _suppressed_ elements ⚠️

### Suppressing interactivity without inert

One can `marker`, the third argument to a function, to mark hidden elements.
Later one can create a style matching given marker to apply `pointer-events:none`

```css
[hidden-node] {
  pointer-events: none;
}
```

```tsx
hideOthers(notThisOne, undefined /*parent = document*/, 'hidden-node');
```

Generally speaking the same can be achieved by addressing `[aria-hidden]` nodes, but
not all `aria-hidden` nodes are expected to be non-interactive.
Hence, it's better to separate concerns.

# Inspiration

Based on [smooth-ui](https://github.com/smooth-code/smooth-ui) modal dialogs.

# See also

- [inert](https://github.com/WICG/inert) - The HTML attribute/property to mark parts of the DOM tree as "inert".
- [react-focus-lock](https://github.com/theKashey/react-focus-lock) to lock Focus inside modal.
- [react-scroll-lock](https://github.com/theKashey/react-scroll-lock) to disable page scroll while modal is opened.

# Size

Code is 30 lines long

# Licence

MIT

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