19.2.0 • Published 3 days ago

@commercetools-uikit/accessible-hidden v19.2.0

Weekly downloads
2,411
License
MIT
Repository
github
Last release
3 days ago

Accessible Hidden

Description

This component is used to hide content offscreen, removing it from sighted users, while keeping it still accessible to screenreaders and other assistive technology. It can also be useful for testing with tools like react-testing-library and cypress, which requires quering 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.

Usage

Example: Accessibility (a11y)

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).

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

<h3>An Article on A11y</h3>
<p>A summary of the article</p>
<button>Read More<AccessibleHidden> from An Article on Accessibility</AccessibleHidden></button>
Example: Tests

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.

Properties

This component only accepts the prop children, which is the element you want to visually hide.

References:

19.2.0

7 days ago

19.1.0

19 days ago

19.0.0

2 months ago

18.5.0

2 months ago

18.4.0

2 months ago

18.3.0

2 months ago

18.2.0

3 months ago

18.1.0

3 months ago

18.0.0

3 months ago

17.1.0

3 months ago

17.0.1

3 months ago

17.0.0

4 months ago

16.12.1

5 months ago

16.12.0

5 months ago

16.5.0

10 months ago

16.6.1

9 months ago

16.6.0

9 months ago

16.4.1

10 months ago

16.9.0

6 months ago

16.7.3

8 months ago

16.7.2

8 months ago

16.7.1

8 months ago

16.7.0

9 months ago

16.7.5

8 months ago

16.7.4

8 months ago

16.8.0

6 months ago

16.11.0

6 months ago

16.10.0

6 months ago

16.4.0

10 months ago

16.3.0

11 months ago

16.2.1

11 months ago

16.2.0

11 months ago

16.1.1

12 months ago

16.1.0

12 months ago

15.15.0

1 year ago

15.15.1

1 year ago

16.0.0

1 year ago

15.13.2

1 year ago

15.14.3

1 year ago

15.14.1

1 year ago

15.14.2

1 year ago

15.14.0

1 year ago

15.13.1

1 year ago

15.13.0

1 year ago

15.12.0

1 year ago

15.10.0

1 year ago

15.9.0

1 year ago

15.11.2

1 year ago

15.11.0

1 year ago

15.11.1

1 year ago

15.7.0

1 year ago

15.8.0

1 year ago

15.5.0

1 year ago

15.5.1

1 year ago

15.6.0

1 year ago

15.4.0

1 year ago

15.3.0

2 years ago

15.2.4

2 years ago

15.2.1

2 years ago

15.2.2

2 years ago

15.2.3

2 years ago

15.1.1

2 years ago

15.1.2

2 years ago

15.1.0

2 years ago

15.2.0

2 years ago

15.0.0

2 years ago

14.0.0

2 years ago

13.0.0

2 years ago

12.2.9

2 years ago

12.2.5

2 years ago

12.2.4

3 years ago

12.2.3

3 years ago

12.2.2

3 years ago

12.1.0

3 years ago

12.0.12

3 years ago

12.0.8

3 years ago

12.0.7

3 years ago

12.0.0

3 years ago

11.2.1

3 years ago

11.0.2

3 years ago

11.0.1

3 years ago

10.46.3

3 years ago

10.44.4

3 years ago

10.44.1

3 years ago

10.44.0

3 years ago

10.42.2

3 years ago

10.42.0

3 years ago

10.41.0

3 years ago

10.39.8

3 years ago

10.39.7

3 years ago

10.39.6

3 years ago

10.39.2

4 years ago

10.39.4

4 years ago

10.39.3

4 years ago

10.39.1

4 years ago

10.30.2

4 years ago

10.30.1

4 years ago

10.18.7-canary.5

4 years ago

10.18.7-canary.6

4 years ago

10.18.7-canary.7

4 years ago

10.18.7-canary.4

4 years ago

10.18.7-canary.3

4 years ago

10.18.7-canary.2

4 years ago

10.18.7-canary.1

4 years ago

10.18.6-canary.1

4 years ago

10.18.7-canary.0

4 years ago

10.18.6-canary.0

4 years ago

10.18.5-canary.4

4 years ago

10.18.5-canary.3

4 years ago

10.18.5-canary.2

4 years ago

10.18.5-canary.1

4 years ago

10.18.5-canary.0

4 years ago

10.18.4

4 years ago

10.18.4-canary.9

4 years ago

10.18.4-canary.8

4 years ago

10.18.4-canary.7

4 years ago

10.18.4-canary.6

4 years ago

10.18.4-canary.3

4 years ago

10.18.4-canary.4

4 years ago

10.18.4-canary.5

4 years ago

10.18.4-canary.2

4 years ago

10.18.4-canary.1

4 years ago

10.18.4-canary.0

4 years ago

10.18.3-canary.2

4 years ago

10.18.3-canary.3

4 years ago

10.18.3-canary.1

4 years ago

10.18.3-canary.0

4 years ago

10.18.2-canary.3

4 years ago

10.18.2-canary.2

4 years ago

10.18.2-canary.1

4 years ago

10.17.1-canary.3

4 years ago

10.17.1-canary.2

4 years ago

10.18.1-canary.0

4 years ago

10.18.2-canary.0

4 years ago

10.17.1-canary.1

4 years ago

10.17.1-canary.0

4 years ago

10.17.0

4 years ago

10.16.1-canary.8

4 years ago

10.16.1-canary.7

4 years ago

10.16.1-canary.6

4 years ago

10.16.1-canary.5

4 years ago

10.16.1-canary.4

4 years ago