Components

VisuallyHidden

Hides content visually and keeps it available to screen readers.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { VisuallyHidden } from '@bigbang/ui';
Source: VisuallyHidden.tsx
Storybook: VisuallyHidden · Playground

VisuallyHidden is in the @bigbang/ui package. Installation and style files are the same as for Button; see the Button code tab for details.

import { VisuallyHidden } from '@bigbang/ui';

<VisuallyHidden>...</VisuallyHidden>;
<VisuallyHidden focusable render={<a href="#main" />}>...</VisuallyHidden>;

Props

childrenRequired

Description: Text for screen readers only, such as the context of an icon-only control or a table caption.
Type: ReactNode

focusable

Description: Shows the content while it, or a link inside it, has keyboard focus. Use it for skip links.
Type: boolean
Default: false

render

Description: Renders another element, such as <caption> or <a>. Defaults to a <span>.
Type: ReactElement | ComponentRenderFn<HTMLProps, {}>

Native <span> attributes are passed through. className and style are not accepted.

Data attributes

data-component="visually-hidden": on the root element.
data-focusable: on the root element when focusable is on (empty value).