HomeCasa Prompts

Crea un componente React accessibile con TypeScript

Genera un componente React tipizzato e accessibile, con test, seguendo buone pratiche di composizione e gestione dello stato. Pensato per ChatGPT, Claude e Microsoft Copilot. Include 3 variabili personalizzabili e puoi copiarlo gratuitamente con un clic.

Intermedio · Codice · In attesa di revisione editoriale

Pensato per:

Prompt

Sei uno sviluppatore frontend senior specializzato in React, TypeScript e accessibilità (WCAG 2.2 AA).

Crea il componente {{component}} con questi requisiti:
- Funzionalità: {{functionality}}
- Stile con: {{styling}}
- Deve gestire questi stati: caricamento, vuoto, errore e successo.

Requisiti tecnici:
1. Props tipizzate con un'interfaccia esportata e valori predefiniti sensati.
2. Accessibilità: ruoli e attributi ARIA solo quando servono, focus visibile, navigazione completa da tastiera e testo per gli screen reader.
3. Nessuna dipendenza di runtime oltre a React e al sistema di stile scelto; nei test solo React Testing Library e user-event.
4. Un esempio di utilizzo del componente.
5. Test con React Testing Library che coprano l'interazione da tastiera e gli stati.

Alla fine spiega quali scelte di accessibilità hai fatto e perché.

Come usarlo

Indica la libreria di stile che il tuo progetto usa già, così il risultato si integra. Verifica sempre il componente con uno screen reader o con il pannello di accessibilità del browser.

Esempio d'uso

Componente: selettore di date con intervallo minimo e massimo.

Esempio di risultato

Componente (estratto)

export interface CityComboboxProps {
  options: string[];
  label?: string;
  status?: 'loading' | 'error' | 'success';
  onSelect: (city: string) => void;
}

export function CityCombobox({ options, label = 'Città', status = 'success', onSelect }: CityComboboxProps) {
  const [query, setQuery] = useState('');
  const [active, setActive] = useState(-1);
  const listId = useId();
  const results = options.filter((c) => c.toLowerCase().includes(query.toLowerCase()));

  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
    if (e.key === 'ArrowDown') setActive((i) => Math.min(i + 1, results.length - 1));
    if (e.key === 'ArrowUp') setActive((i) => Math.max(i - 1, 0));
    if (e.key === 'Enter' && results[active]) onSelect(results[active]);
    if (e.key === 'Escape') setActive(-1);
  }

  return (
    <div className="relative">
      <label htmlFor={`${listId}-input`} className="block text-sm font-medium">{label}</label>
      <input
        id={`${listId}-input`} role="combobox" aria-expanded={results.length > 0} aria-controls={listId}
        aria-activedescendant={active >= 0 ? `${listId}-${active}` : undefined}
        className="w-full rounded border px-3 py-2 focus-visible:ring-2 focus-visible:ring-blue-600"
        value={query} onChange={(e) => setQuery(e.target.value)} onKeyDown={onKeyDown}
      />
      <ul id={listId} role="listbox" className="absolute z-10 w-full rounded border bg-white">
        {results.map((city, i) => (
          <li key={city} id={`${listId}-${i}`} role="option" aria-selected={i === active}
            className={i === active ? 'bg-blue-100 px-3 py-1' : 'px-3 py-1'} onMouseDown={() => onSelect(city)}>
            {city}
          </li>
        ))}
      </ul>
      <p role="status" className="sr-only">{status === 'loading' ? 'Caricamento…' : `${results.length} risultati`}</p>
    </div>
  );
}

Scelte di accessibilità

  • Il focus resta sul campo e aria-activedescendant indica l'opzione attiva, come raccomanda il pattern combobox di ARIA.
  • Il numero di risultati viene annunciato in una regione role="status", così lo screen reader lo comunica senza spostare il focus…

Dati chiave

Categoria
Programmazione e sviluppo · React
Tipo di output
Codice
Livello
Intermedio
Pensato per
ChatGPT, Claude e Microsoft Copilot
Verificato in
In attesa di verifica editoriale
Variabili
Componente, Funzionalità e Sistema di stile
Lingua
Italiano
Prezzo
Gratuito, senza registrazione
Aggiornato
07/11/2026

Domande frequenti

Così il mio componente è conforme alle WCAG?

Non da solo. Ottieni una buona base, ma devi comunque testarlo da tastiera, con uno screen reader come NVDA o VoiceOver e con uno strumento automatico come axe.

Funziona con Next.js?

Sì. Il componente è React standard; con l'App Router di Next.js aggiungi 'use client' in cima al file se usa stato o gestori di eventi.

A cosa serve questo prompt?

Genera un componente React tipizzato e accessibile, con test, seguendo buone pratiche di composizione e gestione dello stato.

Con quali strumenti di IA funziona?

È pensato per ChatGPT, Claude e Microsoft Copilot. Non lo abbiamo ancora verificato in questi strumenti, quindi i risultati possono variare da uno all'altro.

Come personalizzo il prompt?

Clicca su «Personalizza» e compila le variabili (Componente, Funzionalità e Sistema di stile). Il testo si aggiorna all'istante e poi puoi copiarlo con un clic. I valori vengono salvati solo nel tuo browser.

Serve esperienza per usarlo?

È di livello intermedio: conviene conoscere l'argomento per fornire un buon contesto e valutare il risultato con occhio critico.

Questo prompt è gratuito?

Sì. Tutti i prompt di HomeCasa Prompts sono gratuiti, senza registrazione né abbonamento. Puoi usarli anche in progetti professionali.

Posso fidarmi dell'output dell'IA?

Consideralo una bozza di alta qualità: verifica sempre dati, cifre e affermazioni importanti prima di pubblicare o prendere decisioni.

Prompt correlati