AccessibleHidden

Description

This component is used to hide content offscreen, removing it from sighted users, while keeping it still accessible to screen readers and other assistive technology. It can also be useful for testing with tools like react-testing-library and cypress, which requires querying elements through content which might not be intended to be visible on screen, such as querying for a input by its label while the label is visually hidden.

It's the logical opposite of the aria-hidden attribute.

Installation

yarn add @commercetools-uikit/accessible-hidden

npm --save install @commercetools-uikit/accessible-hidden

Additionally install the peer dependencies (if not present)

yarn add react

npm --save install react

Usage

import AccessibleHidden from '@commercetools-uikit/accessible-hidden';

/**
 * In this example, we're showing additional text specifically to be read only
 * by screen readers, to make it more contextualized and easier to understand
 * for non-sighted users (as well "translating" the numeronym which might confuse
 * automatic screen-readers).
 */
const Example = () => (
  <div>
    <h3>An Article on A11y</h3>
    <p>A summary of the article</p>
    <button>
      Read More
      <AccessibleHidden> from An Article on Accessibility</AccessibleHidden>
    </button>
  </div>
);

export default Example;

Properties

| Props | Type | Required | Default | Description | | ---------- | ----------- | :------: | ------- | ----------- | | children | ReactNode | ✅ | | |

Using the component for a11y testing

This is an example for when you would want to render an input without visually displaying a label. You still would want a label to be present so it can be used when testing with RTL as well as supporting a11y.

const rendered = render(
  <>
    <AccessibleHidden>
      <label htmlFor="maiden-name-input">Enter your Maiden Name</label>
    </AccessibleHidden>
    <input id="maiden-name-input" type="text"></input>
  </>
);

expect(rendered.getByLabelText('Enter your Maiden Name')).toBeInTheDocument();
// ✓ True

It is a common requirement to show inputs inside tables. In such a case a sighted user should be able to understand the context of the input through the column header. A label element taking space inside the cell is undesirable.

References:

• The A11Y Project - How-to: Hide Content