@teste-ui/visually-hidden

The visually hidden component styles itself so that it’s content is not visible, but it is available to assistive technologies like screen readers and other text to speech programs.

Installation

yarn add @teste-ui/visually-hidden

# or

npm i @teste-ui/visually-hidden

Import component

import { VisuallyHidden } from "@teste-ui/visually-hidden"

Basic usage

// it renders a `span` by default
<VisuallyHidden>This content will be hidden on screen</VisuallyHidden>

// for visually hidden input fields
<VisuallyHiddenInput type="checkbox" defaultChecked/>

References

• https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
• https://a11yproject.com/posts/how-to-hide-content/

Change Log

2.0.4

Patch Changes

• Updated dependencies [c11743b47]:
  • @teste-ui/utils@2.0.4

2.0.3

Patch Changes

• Updated dependencies [36ef37d58, 6c15ec2c2]:
  • @teste-ui/utils@2.0.3

2.0.2

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]:

  • @teste-ui/utils@2.0.2

2.0.1

Patch Changes

• Updated dependencies [f77e3c98f]:
  • @teste-ui/utils@2.0.1

2.0.0

Major Changes

• #5879 c390af485 Thanks @TimKolberger! - Bump all packages to next major for Chakra UI version 2.

• #5989 ed692c0ae Thanks @TimKolberger! - Omit src directory from being published to npm

• #5882 41b3119f5 Thanks @TimKolberger! - Bump peer dependency to React and ReactDOM to >=18

Patch Changes

• Updated dependencies [c390af485, ed692c0ae, 41b3119f5]:
  • @teste-ui/utils@2.0.0

2.0.0-next.2

Major Changes

• #5989 ed692c0ae Thanks @TimKolberger! - Omit src directory from being published to npm

Patch Changes

• Updated dependencies [ed692c0ae]:
  • @teste-ui/utils@2.0.0-next.2

2.0.0-next.1

Major Changes

• #5882 41b3119f5 Thanks @TimKolberger! - Bump peer depencency to React and ReactDOM to >=18

Patch Changes

• Updated dependencies [41b3119f5]:
  • @teste-ui/utils@2.0.0-next.1

2.0.0-next.0

Major Changes

• #5879 c390af485 Thanks @TimKolberger! - Bump all packages to next major for Chakra UI version 2.

Patch Changes

• Updated dependencies [c390af485]:
  • @teste-ui/system@2.0.0-next.0
  • @teste-ui/utils@2.0.0-next.0

1.1.6

Patch Changes

• e1fe48cbe Thanks @TimKolberger! - Bumped patch version for every package to fix release process. Root cause was a bug in our CI configuration.
• Updated dependencies [e1fe48cbe]:
  • @teste-ui/utils@1.10.4

1.1.5

Patch Changes

• Updated dependencies [a870e6b94]:
  • @teste-ui/utils@1.10.3

1.1.4

Patch Changes

• #5536 a503acabe Thanks @TimKolberger! - Bumped patch version for every package to fix release process.

• Updated dependencies [a503acabe]:

  • @teste-ui/utils@1.10.2

1.1.3

Patch Changes

• Updated dependencies [24b4333d0]:
  • @teste-ui/utils@1.10.1

1.1.2

Patch Changes

• Updated dependencies [1537a725f]:
  • @teste-ui/utils@1.10.0

1.1.1

Patch Changes

• #5075 b28142946 Thanks @cschroeter! - Update babel config to transpile soruces for older browsers. This fixes issues with CRA and Storybook.
• Updated dependencies [b28142946]:
  • @teste-ui/utils@1.9.1

1.1.0

Minor Changes

• #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

  The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

  Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@teste-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

  Here's how to resolve it:

  `jsx live=false // Won't work 🎇 import { useOutsideClick } from "@teste-ui/hooks/dist/use-outside-click"

  // Works ✅ import { useOutsideClick } from "@teste-ui/hooks" `

  If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

• Updated dependencies [6095eaf9a]:
  • @teste-ui/utils@1.9.0

1.0.16

Patch Changes

• Updated dependencies [cd0893c56]:
  • @teste-ui/utils@1.8.4

1.0.15

Patch Changes

• Updated dependencies [c06d242c6, 5b4d8ef24]:
  • @teste-ui/utils@1.8.3

1.0.14

Patch Changes

• Updated dependencies [4c1071969, 43f66097b]:
  • @teste-ui/utils@1.8.2

1.0.13

Patch Changes

• Updated dependencies [4a1e4d93b]:
  • @teste-ui/utils@1.8.1

1.0.12

Patch Changes

• Updated dependencies [d0f50a46e, b479ff22e, 07d15eab4]:
  • @teste-ui/utils@1.8.0

1.0.11

Patch Changes

• Updated dependencies [e9ac4cc76]:
  • @teste-ui/utils@1.7.0

1.0.10

Patch Changes

• Updated dependencies [0974e547c, 59ea894a7]:
  • @teste-ui/utils@1.6.0

1.0.9

Patch Changes

• Updated dependencies [8b5eb9654]:
  • @teste-ui/utils@1.5.2

1.0.8

Patch Changes

• Updated dependencies [1a04a41bd, e481ba491]:
  • @teste-ui/utils@1.5.1

1.0.7

Patch Changes

• Updated dependencies [a58b724e9, b724a9dd9]:
  • @teste-ui/utils@1.5.0

1.0.6

Patch Changes

• Updated dependencies [e748219f3, 91ef14839]:
  • @teste-ui/utils@1.4.0

1.0.5

Patch Changes

• Updated dependencies [87cc23e14]:
  • @teste-ui/utils@1.3.0

1.0.4

Patch Changes

• Updated dependencies [ff4a36bca, 483687237, 61962345c]:
  • @teste-ui/utils@1.2.0

1.0.3

Patch Changes

• Updated dependencies [8b87406c]:
  • @teste-ui/utils@1.1.0

1.0.2

Patch Changes

• Updated dependencies [e73878ee]:
  • @teste-ui/utils@1.0.2

1.0.1

Patch Changes

• Updated dependencies [5c482483]:
  • @teste-ui/utils@1.0.1

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0 (2020-11-13)

Note: Version bump only for package @teste-ui/visually-hidden

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.8 (2020-10-29)

Bug Fixes

• toast: allow custom render in update (eb8bff9), closes #2362

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.7 (2020-10-25)

Note: Version bump only for package @teste-ui/visually-hidden

1.0.0-rc.6 (2020-10-25)

Note: Version bump only for package @teste-ui/visually-hidden

1.0.0-rc.5 (2020-09-27)

Note: Version bump only for package @teste-ui/visually-hidden

1.0.0-rc.4 (2020-09-25)

Note: Version bump only for package @teste-ui/visually-hidden

1.0.0-rc.3 (2020-08-30)

Note: Version bump only for package @teste-ui/visually-hidden

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.2 (2020-08-09)

Note: Version bump only for package @teste-ui/visually-hidden

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.1 (2020-08-06)

Note: Version bump only for package @teste-ui/visually-hidden

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.0 (2020-07-26)

Note: Version bump only for package @teste-ui/visually-hidden

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.7 (2020-07-26)

Note: Version bump only for package @teste-ui/visually-hidden

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.6 (2020-07-15)

Note: Version bump only for package @teste-ui/visually-hidden

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.5 (2020-07-15)

Note: Version bump only for package @teste-ui/visually-hidden

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.4 (2020-07-01)

Bug Fixes

• #891 (e107acc)
• ts issue with sx prop (d3b1340)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.3 (2020-06-28)

Bug Fixes

• #891 (e107acc)
• ts issue with sx prop (d3b1340)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.2 (2020-06-21)

Bug Fixes

• #891 (e107acc)