@leafygreen-ui/a11y
TypeScript icon, indicating that this package has built-in type declarations

1.4.13 • Public • Published

A11y

npm (scoped)

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @leafygreen-ui/a11y

Weekly Downloads

43,465

Version

1.4.13

License

Apache-2.0

Unpacked Size

45.2 kB

Total Files

31

Last publish

Collaborators

  • stephl3
  • brookescarlett
  • shaneeza
  • hswolff
  • thesonofthomp