Visually Hidden

Draft

Visually Hidden hides content on screen while keeping it available to screen readers and other assistive technology. Use it to give icon-only controls an accessible name or to add context that sighted users get from the layout. Content is revealed when it receives focus, so it can also be used for skip links.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

import { NbhdVisuallyHidden } from '@fbin-web/neighborhood-core';

Usage

<nbhd-text>
  Sale price: <nbhd-visually-hidden>originally $199, now </nbhd-visually-hidden>$149
</nbhd-text>

Install

npm install @fbin-web/neighborhood-react

Import

import { NbhdVisuallyHidden } from '@fbin-web/neighborhood-react';

Usage

import { NbhdText, NbhdVisuallyHidden } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdText>
      Sale price: <NbhdVisuallyHidden>originally $199, now </NbhdVisuallyHidden>$149
    </NbhdText>
  </>
);

Slots

Name	Description
`(default)`	The content to hide visually.