# a11y-status

> Create a singleton live region for a11y status updates

Latest version **2.0.2** (published 2024-07-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install a11y-status
pnpm add a11y-status
yarn add a11y-status
bun add a11y-status
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2024-07-30 |
| First published | 2020-07-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 22.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3036 |
| Maintainers | ifiokjr |

## Links

- npm: https://www.npmjs.com/package/a11y-status
- Repository: https://github.com/remirror/remirror
- Homepage: https://github.com/remirror/remirror/tree/HEAD/packages/a11y-status
- Issues: https://github.com/remirror/remirror/issues
- npm.io page: https://npm.io/package/a11y-status

## Dependencies (3)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.22.3
- [throttle-debounce](https://npm.io/package/throttle-debounce.md) ^3.0.1
- [@types/throttle-debounce](https://npm.io/package/@types/throttle-debounce.md) ^2.1.0

## Recent versions

- 2.0.2 (latest) — 2024-07-30
- 2.0.2-beta.1 (beta) — 2024-07-19
- 0.0.0-pr2271.2 (pr2271) — 2024-07-18
- 0.0.0-pr2222.1 (pr2222) — 2023-12-12
- 0.0.0-pr2223.1 (pr2223) — 2023-12-12
- 0.0.0-pr2169.2 (pr2169) — 2023-11-06
- 0.0.0-pr2166.4 (pr2166) — 2023-10-06
- 0.0.0-pr2156.1 (pr2156) — 2023-09-28
- 0.0.0-pr2128.4 (pr2128) — 2023-07-26
- 0.0.0-pr2118.1 (pr2118) — 2023-07-13
- 0.0.0-pr2100.1 (pr2100) — 2023-06-28
- 0.0.0-pr1966.1 (pr1966) — 2022-12-26
- 0.0.0-pr1948.1 (pr1948) — 2022-11-25
- 0.0.0-pr1942.1 (pr1942) — 2022-11-21
- 0.0.0-pr1938.1 (pr1938) — 2022-11-15
- … 188 more at https://npm.io/package/a11y-status/versions

## README

# a11y-status

[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/a11y-status.svg?)](https://bundlephobia.com/result?p=a11y-status) [![npm](https://img.shields.io/npm/dm/a11y-status.svg?&logo=npm)](https://www.npmjs.com/package/a11y-status)

## Problem

You'd like to update your screen reader users on changes in the status of your ui but don't want to create multiple dom elements to notifiy them.

### Solution

Inject a visually hidden singleton element in the dom which is responsible for notifying screen reader users of updates to the accessibility status of the UI.

## Installation

```bash
yarn add a11y-status # yarn
pnpm add a11y-status # pnpm
npm install a11y-status # npm
```

Note that the `11` is the number eleven. `A-Eleven-Y` is a widely used shorthand for `accessibility`.

## Usage

Import the `setStatus` function from this library and then use the function to set the desired status in your code.

```ts
import { setStatus } from 'a11y-status';

const button = document.querySelector('#insert-selection');
const select = document.querySelector('#selection');

button.addEventListener('click', (event) => {
  const itemName = select.value;

  // Notify the screen reader.
  setStatus(`Selected item: ${itemName}`);
});
```

## Acknowledgements

This code was taken from [downshift](https://github.com/downshift-js/downshift/blob/master/src/set-a11y-status.js)

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