HomeCasa Prompts

Criar um componente React acessível com TypeScript

Gere um componente React tipado e acessível, com testes, seguindo boas práticas de composição e de estado. Pensado para ChatGPT, Claude e Microsoft Copilot. Inclui 3 variáveis personalizáveis e pode copiá-lo gratuitamente com um clique.

Intermédio · Código · Pendente de revisão editorial

Pensado para:

Prompt

És um programador frontend sénior especializado em React, TypeScript e acessibilidade (WCAG 2.2 AA).

Cria o componente {{component}} com estes requisitos:
- Funcionalidade: {{functionality}}
- Estilos com: {{styling}}
- Tem de tratar estes estados: a carregar, vazio, erro e sucesso.

Requisitos técnicos:
1. Props tipadas com uma interface exportada e valores por omissão sensatos.
2. Acessibilidade: papéis e atributos ARIA apenas quando necessário, foco visível, navegação completa por teclado e texto para leitores de ecrã.
3. Sem dependências de execução além do React e do sistema de estilos escolhido; nos testes, apenas React Testing Library e user-event.
4. Um exemplo de utilização do componente.
5. Testes com React Testing Library que cubram a interação por teclado e os estados.

No final, explica que decisões de acessibilidade tomaste e porquê.

Como utilizar

Indique a biblioteca de estilos que o seu projeto já utiliza para que o resultado se integre. Verifique sempre o componente com um leitor de ecrã ou com o painel de acessibilidade do navegador.

Exemplo de utilização

Componente: seletor de datas com intervalo mínimo e máximo.

Exemplo de resultado

Componente (excerto)

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

export function CityCombobox({ options, label = 'Cidade', 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' ? 'A carregar…' : `${results.length} resultados`}</p>
    </div>
  );
}

Decisões de acessibilidade

  • O foco mantém-se no campo e aria-activedescendant indica a opção ativa, como recomenda o padrão combobox do ARIA.
  • O número de resultados é anunciado numa região role="status", para que o leitor de ecrã o comunique sem mover o foco…

Dados-chave

Categoria
Programação e desenvolvimento · React
Tipo de resultado
Código
Nível
Intermédio
Pensado para
ChatGPT, Claude e Microsoft Copilot
Verificado em
Pendente de verificação editorial
Variáveis
Componente, Funcionalidade e Sistema de estilos
Idioma
Português
Preço
Gratuito, sem registo
Atualizado
07/11/2026

Perguntas frequentes

Com isto o meu componente cumpre as WCAG?

Não por si só. Fica com uma boa base, mas continua a ser preciso testar com o teclado, com um leitor de ecrã como o NVDA ou o VoiceOver e com uma ferramenta automática como o axe.

Funciona com Next.js?

Sim. O componente é React normal; com o App Router do Next.js, acrescente 'use client' no início do ficheiro se usar estado ou handlers de eventos.

Para que serve este prompt?

Gere um componente React tipado e acessível, com testes, seguindo boas práticas de composição e de estado.

Com que ferramentas de IA funciona?

Foi pensado para ChatGPT, Claude e Microsoft Copilot. Ainda não o verificámos nestas ferramentas, pelo que os resultados podem variar entre elas.

Como personalizo o prompt?

Clique em “Personalizar” e preencha as variáveis (Componente, Funcionalidade e Sistema de estilos). O texto atualiza-se instantaneamente e pode depois copiá-lo com um clique. Os valores ficam guardados apenas no seu navegador.

Preciso de experiência para o utilizar?

É de nível intermédio: convém conhecer o tema para fornecer bom contexto e rever o resultado com sentido crítico.

Este prompt é gratuito?

Sim. Todos os prompts do HomeCasa Prompts são gratuitos, sem registo nem subscrição. Pode também utilizá-los em projetos profissionais.

Posso confiar no resultado da IA?

Trate-o como um rascunho de qualidade: verifique sempre os dados, os números e as afirmações importantes antes de publicar ou tomar decisões.

Prompts relacionados