Dialog shadcn accessibile

Risposta breve: ogni DialogContent deve contenere un DialogTitle, anche se il titolo non si vede. Radix collega quel titolo al dialog tramite aria-labelledby, e senza di lui il dialog resta senza nome per lo screen reader.

Il minimo che regge

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

export function DeleteDialog({ name }: { name: string }) {
  return (
    
      
        Elimina
      
      
        
          Eliminare {name}?
          Non si può annullare.
        
        
          
            Annulla
          
          Conferma
        
      
    
  );
}

Il pulsante che apre il dialog conserva il testo, quindi ha già un nome accessibile: aria-label qui sarebbe rumore. Il asChild su DialogTrigger serve a non aggiungere un button dentro un altro button, che è il modo più rapido per rompere la navigazione da tastiera.

Cosa arriva gratis

• Focus trap: il tab resta dentro il dialog finché è aperto, e il focus torna al trigger alla chiusura.
• Esc e click fuori: le due uscite predefinite funzionano, e onEscapeKeyDown permette di bloccarle quando servono.
• Attributi: role="dialog", aria-modal e i riferimenti a titolo e descrizione li scrive Radix.
• Scroll di sfondo: il body smette di scorrere, senza il salto che si vede quando lo blocchi con overflow: hidden.

Il titolo che non si vede

Un dialog di sole azioni può non avere un titolo visibile, ma il titolo serve lo stesso: si monta DialogTitle dentro un contenitore che lo nasconde visivamente, lasciandolo nel DOM. Il testo resta leggibile dallo screen reader e il riferimento aria-labelledby continua a puntare a un nodo esistente.

Le trappole ricorrenti

Un DropdownMenu dentro un DialogContent porta il menu in un portal esterno, e il click fuori dal dialog chiude tutto: la sequenza è descritta in il dialog si chiude da un dropdown. Un dialog dentro un altro dialog richiede attenzione al focus, perché l'ultimo aperto deve prendere il controllo.

Il comando

npx shadcn@latest add dialog

Record vivi nel catalogo

I dialog già pubblicati mostrano le varianti: dialog-01 per la conferma, la categoria blocchi dialog per gli altri casi, e la libreria shadcn per il componente base. Ogni record indica licenza e sorgente.

La limitazione

Un dialog senza testo descrittivo chiede di dichiarare l'assenza del riferimento, altrimenti la console avvisa a ogni apertura. Il componente non può indovinare se la descrizione sia utile: quella decisione resta al contenuto, e nessun test automatico la prende al posto tuo. La checklist è in componenti React accessibili.

Dove continuare

L'errore del titolo mancante è analizzato in DialogContent richiede DialogTitle; il ruolo di ARIA è spiegato in che cos'è ARIA; l'abuso opposto è in aria-label sui bottoni. Per una verifica completa leggi come fare un audit di accessibilità.