https://github.com/tetracalibers/polym-a11y

https://github.com/tetracalibers/polym-a11y

Last synced: 26 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/tetracalibers/polym-a11y
• Owner: tetracalibers
• Created: 2022-09-25T14:53:44.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-09-26T07:25:48.000Z (over 2 years ago)
• Last Synced: 2024-12-07T23:38:42.587Z (about 2 months ago)
• Language: TypeScript
• Size: 13.2 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @polym/a11y

**Collection of helpers for implementing React components with accessibility in mind**

## Install

```

npm i --save @polym/a11y

```

or

```

yarn add @polym/a11y

```

## VisuallyHidden

**Containers for elements that are visually obscured and whose presence is communicated only to the screen reader**

[Click here for full documentation and demo](https://tetracalibers.github.io/polym-a11y/?path=/docs/visuallyhidden-document--page)

### Usecase

```ts

import { VisuallyHidden } from '@polym/a11y'

export const NumberInput = () => {

  const [count, setCount] = useState(0)

  return (

    

       setCount((now) => now - 1)}

      />

       setCount(e.target.value)} />

      

        {label}

      

       setCount((now) => now + 1)}

      />

      

        {count}

      

    

  )

}

```

Even if you do not want the label to appear in the design, do not use `display:none;` to erase its existence.

Without labels, screen reader users have no way of knowing what the input field is.

```ts

  {label}

```

The screen reader reads out changes in input values.

There is no need to display the numbers for this reading, which is where `VisuallyHidden` comes in.

```ts

  {count}

```