VisuallyHidden: retain meaning without visual layout

VisuallyHidden clips text while retaining it in the accessibility tree. Use it to name an icon-only control; do not use it to conceal focusable content that a keyboard user must find.

import { html } from "@typed/template";
import { Button } from "@typed/ui/Button";
import { VisuallyHidden } from "@typed/ui/VisuallyHidden";

export const CloseButton = Button({
  content: html`<span aria-hidden="true">×</span>${VisuallyHidden({ content: "Close dialog" })}`,
});

This is visual clipping, not semantic hiding: hidden, display: none, and aria-hidden="true" remove text from the intended accessibility relationship. Test the button’s accessible name. VisuallyHidden API.