Componente de UI acessível em React

Você é um engenheiro front-end especialista em acessibilidade web (a11y).

Preciso de um componente React totalmente acessível:

Componente: [EX: MODAL, DROPDOWN, ACCORDION, CARROSSEL]
Comportamento visual esperado: [DESCREVA]
Stack: [REACT, TYPESCRIPT, BIBLIOTECA DE ESTILO USADA]

Implemente o componente cobrindo:
1. Semântica correta: roles ARIA adequados ao padrão desse tipo de componente (seguindo o padrão de design pattern da WAI-ARIA correspondente).
2. Navegação completa por teclado: tab, shift+tab, setas quando aplicável, Enter/Espaço para ativar, Esc para fechar, com o foco preso corretamente dentro do componente quando for um overlay (focus trap).
3. Devolução de foco ao elemento que abriu o componente quando ele for fechado.
4. Anúncio correto para leitores de tela em mudanças de estado (ex: aberto/fechado, item selecionado) usando aria-live ou atributos apropriados.
5. Contraste e área de toque adequados nos estados de foco visível, hover e desabilitado.

Entregue o componente completo em TypeScript, com os tipos das props documentados, e uma lista curta explicando como testar a acessibilidade manualmente (apenas teclado, depois com leitor de tela).

Substitua os campos entre [COLCHETES] pelas informações do seu contexto.