a11y

A11y

Installation

Yarn

yarn add @leafygreen-ui/a11y

NPM

npm install @leafygreen-ui/a11y

Example

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

const Button = () => {
  return (
    <button>
      <svg role="presentation" aria-hidden />
      <VisuallyHidden>Click me</VisuallyHidden>
    </button>
  );
};

Output HTML

<button>
  <svg role="presentation" aria-hidden="true" />
  <div>Click me</div>
</button>

VisuallyHidden

Properties

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

Properties

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.

Properties

Parameter	Type	Description	Default
props	Record<string, any>	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.

Properties

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