Foundations

Visually Hidden

BetaSince 0.1.0

Hides its content on screen but keeps it for screen readers, such as an icon's label.

import { VisuallyHidden } from "@anantya/uix";

Overview

VisuallyHidden hides its content on screen but keeps it for screen readers. Use it for words a sighted reader gets from the layout, such as which row a Send reminder button belongs to, or for a skip link that shows on focus.

To name a button that shows only an icon, use IconButton's aria-label instead.

Signature

function VisuallyHidden(props: VisuallyHiddenProps): ReactElement;

interface VisuallyHiddenProps extends HTMLAttributes<HTMLElement> {
  asChild?: boolean;
  ref?: Ref<HTMLElement>;
}

Parameters

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Hides its one child element, such as a heading, instead of a `<span>`.
`ref`	`Ref<HTMLElement>`	-	Gets the rendered element.
Any HTML attribute	`HTMLAttributes<HTMLElement>`	-	Passed to the element. Your `className` comes last, so it can override.

Returns

A <span> with Tailwind's sr-only class, or its child with that class when asChild is set. sr-only clips the content to 1px without display: none, so screen readers still read it.

Example

Each Remind button adds the customer's name, hidden, so a screen reader hears "Remind Mehta Textiles" instead of three buttons named "Remind".

Mehta Textiles ₹48,500
Sharma Traders ₹12,200
Kaveri Foods ₹7,850

Code

import { Button, VisuallyHidden } from "@anantya/uix";

const overdue = [
  { customer: "Mehta Textiles", amount: "₹48,500" },
  { customer: "Sharma Traders", amount: "₹12,200" },
  { customer: "Kaveri Foods", amount: "₹7,850" },
];

export default function ReminderButtons() {
  return (
    <ul className="flex w-full max-w-sm flex-col divide-y divide-border text-sm">
      {overdue.map(({ customer, amount }) => (
        <li key={customer} className="flex items-center justify-between gap-4 py-2">
          <span>
            {customer} <span className="text-muted-foreground">{amount}</span>
          </span>
          <Button size="sm" variant="secondary">
            Remind<VisuallyHidden> {customer}</VisuallyHidden>
          </Button>
        </li>
      ))}
    </ul>
  );
}

Notes

Put the hidden words after the visible ones, so the accessible name starts with what's on screen, and voice control users can say it
For content no one should see or hear, use the hidden attribute instead
Don't hide something that takes focus, unless it shows on focus: add focus:not-sr-only, as a skip link does
It needs Tailwind's sr-only class, which @anantya/uix/theme.css brings

Changelog

Every change to Visually Hidden since 0.1.0 is in the release notes.