Lightbox

Como usar

Um `role="dialog"` modal renderizado em portal: o foco fica preso, o scroll da página é travado, Esc fecha e ←/→ navegam (com volta ao início). `open` e `index` podem ser controlados; sem eles guarda o próprio estado (`defaultOpen`, `defaultIndex`). O foco volta ao elemento de origem ao fechar, a menos que `onCloseAutoFocus` chame `preventDefault()`.

import { useState } from "react";
import { Lightbox } from "vaiperui";
 
const [open, setOpen] = useState(false);
 
<button onClick={() => setOpen(true)}>Abrir</button>
<Lightbox
  open={open}
  onOpenChange={setOpen}
  items={[
    { src: "/photos/road.jpg", alt: "Mountain road", caption: "Road" },
    { src: "/photos/sky.jpg", alt: "Starry sky" },
  ]}
/>

Padrão

<Lightbox open={open} onOpenChange={setOpen} items={items} />

Acessibilidade

• O visualizador é um `role="dialog"` com `aria-modal="true"`, nomeado por `label`, renderizado em um portal.
• Ao abrir, o foco vai para dentro e o Tab circula dentro do diálogo (focus trap); a rolagem da página fica bloqueada enquanto está aberto.
• Ao fechar, o foco volta ao elemento que o tinha antes, a menos que `onCloseAutoFocus` chame `preventDefault()`.
• Fechar, anterior e próxima são botões reais nomeados por `closeLabel`, `previousLabel` e `nextLabel`; anterior/próxima só existem com mais de uma imagem e dão a volta.
• A imagem usa seu `alt`, dentro de um `<figure>` com a `caption` como `<figcaption>`.
• O contador (`counterLabel`, ex.: `2 / 5`) é uma região `aria-live="polite"`, então a troca de imagem é anunciada.

Teclado

Tenha em mente

• Todo item precisa de um `alt`; o componente não gera um.
• Clicar no fundo escuro também fecha, mas é um atalho de mouse; quem usa teclado fecha com Esc ou o botão de fechar. Traduza os rótulos para o idioma da página.