Nullifying Precipitation Machine

    TypeScript icon, indicating that this package has built-in type declarations

    15.2.3 • Public • Published



    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.


    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


    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 = () => (
        <h3>An Article on A11y</h3>
        <p>A summary of the article</p>
          Read More
          <AccessibleHidden> from An Article on Accessibility</AccessibleHidden>
    export default Example;


    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(
          <label htmlFor="maiden-name-input">Enter your Maiden Name</label>
        <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.



    npm i @commercetools-uikit/accessible-hidden

    DownloadsWeekly Downloads






    Unpacked Size

    19.3 kB

    Total Files


    Last publish


    • emmenko
    • commercetools-admin
    • tdeekens