# Core/VisuallyHidden - Usage

VisuallyHidden is a component that hides its children from the visual rendering, but still makes them available to screen readers.

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `React.ReactNode` | Yes | `--` | `--` |

## Usage

```tsx
import { VisuallyHidden } from '@cribl/capra-core';

// Accessible label for an icon-only button
<button>
  🔔 <VisuallyHidden>Notifications</VisuallyHidden>
</button>

// Descriptive link text
<a href="/docs">
  Read more<VisuallyHidden> about our API documentation</VisuallyHidden>
</a>

// Hidden form label
<VisuallyHidden>
  <label htmlFor="search">Search</label>
</VisuallyHidden>
<input id="search" type="search" placeholder="Search..." />
```

## How It Works

The component renders a `<span>` element with CSS that clips it to a 1×1 pixel area using `clip-path: inset(100%)`. This keeps the content in the DOM and accessibility tree while removing it from the visual layout.

The `:not(:focus):not(:active)` selector ensures that if a focusable element (like a skip link) is nested inside, it becomes visible when focused.