Nullifying Precipitation Machine

    @commercetools-uikit/accessible-hidden
    TypeScript icon, indicating that this package has built-in type declarations

    15.2.3 • Public • Published

    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:

    Install

    npm i @commercetools-uikit/accessible-hidden

    DownloadsWeekly Downloads

    5,194

    Version

    15.2.3

    License

    MIT

    Unpacked Size

    19.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • emmenko
    • commercetools-admin
    • tdeekens