@leafygreen-ui/a11y v1.4.13

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

useAccessibleFormField

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

Properties

validateAriaLabelProps

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

Properties

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