A11y

!npm (scoped)

Installation

$3

``shell
pnpm add @leafygreen-ui/a11y
`

$3

`shell
yarn add @leafygreen-ui/a11y
`

$3

`shell
npm install @leafygreen-ui/a11y
`

Example

`js
import { VisuallyHidden } from '@leafygreen-ui/a11y';

const Button = () => {
return (


Click me

);
};
`

VisuallyHidden

$3

| Prop | Type | Description | Default |
| ---------- | -------- | ----------------------------------------------------------------------- | ------- |
| children | string | Text that is announced to screen readers but is hidden from the screen. | |

useAccessibleFormField

Hook that returns two sets of props that accessibly associate a label and its respective input element

$3

| Parameter | Type | Description | Default |
| --------- | -------- | ------------------------------------ | ------- |
| id | string | id that describes the input element. | |

validateAriaLabelProps

Function that validates that either aria-label or aria-labelledby are present within props.

$3

| Parameter | Type | Description | Default |
| --------------- | --------------------- | --------------------------------------------- | ------- |
| props | Record | Object of component properties. | |
| componentName | string | Name of component with props to be validated. | |

prefersReducedMotion

Returns an emotion CSS instance for rendering styles that respect
OS-level preferences for reduced motion.

Use this function to remove scale, size, and positional transitions
for users with that preference set.

$3

| Parameter | Type | Description | Default |
| --------- | -------- | --------------------------------------------------------- | ------- |
| styles | string` | String of styles to render within preference media query. | |