visually-hidden

@solid-aria/visually-hidden

Visually hidden is a common technique for hidding an element visually, while keeping it visible to screen readers and other assistive technology. This would typically be used when you want to take advantage of the behavior and semantics of a native element like a checkbox or radio button, but replace it with a custom styled element visually.

Installation

npm install @solid-aria/visually-hidden
# or
yarn add @solid-aria/visually-hidden
# or
pnpm add @solid-aria/visually-hidden

createVisuallyHidden

Provides props for an element that hides its children visually, but keeps content visible to assistive technology.

How to use it

import { createVisuallyHidden } from "@solid-aria/visually-hidden";

function Example() {
  const { visuallyHiddenProps } = createVisuallyHidden();

  return <div {...visuallyHiddenProps}>I am hidden</div>;
}

Changelog

All notable changes are described in the CHANGELOG.md file.