Biblioteca de Componentes React Acessiveis

Biblioteca de componentes React acessiveis desenvolvida como projeto de TCC-2 do curso de Engenharia de Software da UTFPR - Campus Dois Vizinhos. Os componentes seguem as diretrizes WCAG 2.1 (nivel AA) do W3C.

Componentes

| Componente | Descricao | |------------|-----------| | Button | 5 variantes (primary, secondary, outline, ghost, danger), 3 tamanhos, estados loading/disabled, suporte a icones | | Input | Campo de entrada com label associada, mensagens de erro com role="alert", aria-invalid, aria-describedby | | Select | Select nativo com label, placeholder, opcoes desabilitaveis, mensagens de erro acessiveis | | Textarea | Area de texto com contador de caracteres (aria-live="polite"), maxLength, label associada | | Menu | Dropdown seguindo o padrao WAI-ARIA Menu Button com navegacao completa por teclado | | Card | Card semantico com <article>, stretched-link, focus-within visivel, subcomponentes compostos |

Acessibilidade

• Navegacao por teclado (Tab, Enter, Escape, setas)
• Atributos ARIA (aria-expanded, aria-haspopup, aria-invalid, aria-describedby, aria-live, aria-busy)
• Compatibilidade com leitores de tela
• Focus visible em todos os elementos interativos
• Alvos de toque minimo de 44x44px (WCAG 2.5.5)
• Respeito a prefers-reduced-motion
• Skip-link no layout

Instalacao

npm install acessibilidade-react

Uso

import { Button, Input, Menu, MenuButton, MenuItem, MenuList, Card, CardHeader, CardBody, CardFooter } from 'acessibilidade-react';

// Button
<Button variant="primary" size="md">Enviar</Button>

// Input com validacao
<Input label="E-mail" type="email" required error="E-mail invalido" />

// Menu dropdown
<Menu>
  <MenuButton>Opcoes</MenuButton>
  <MenuList>
    <MenuItem onSelect={() => console.log('Perfil')}>Perfil</MenuItem>
    <MenuItem onSelect={() => console.log('Sair')}>Sair</MenuItem>
  </MenuList>
</Menu>

// Card
<Card href="/produto/1">
  <CardHeader><h2><a href="/produto/1">Produto</a></h2></CardHeader>
  <CardBody>Descricao do produto</CardBody>
  <CardFooter><Button size="sm">Comprar</Button></CardFooter>
</Card>

Scripts

npm run dev           # Servidor de desenvolvimento Next.js
npm test              # Rodar todos os testes (92 testes)
npm run test:coverage # Testes com relatorio de cobertura
npm run build:lib     # Compilar biblioteca para dist/ (CJS + ESM + tipos)
npm run storybook     # Iniciar Storybook na porta 6006
npm run build         # Build do site de demonstracao Next.js
npm run lint          # Linting com eslint-plugin-jsx-a11y

Estrutura do Projeto

src/
  components/
    Button/     # Button.tsx, .test.tsx, .stories.tsx, .types.ts
    Form/       # Input, Select, Textarea, FormField + testes e stories
    Menu/       # Menu, MenuButton, MenuItem, MenuList + testes e stories
    Card/       # Card, CardHeader, CardBody, CardFooter + testes e stories
  utils/
    cn.ts       # Utilitario para merge de classes Tailwind
  index.ts      # Barrel export da biblioteca

app/
  layout.tsx    # Layout com skip-link, nav e landmarks ARIA
  page.tsx      # Landing page
  demo/
    buttons/    # Demo do Button
    forms/      # Demo dos formularios
    menus/      # Demo do Menu
    cards/      # Demo do Card

Tecnologias

• React 19 + TypeScript
• Next.js 15 (site de demonstracao)
• Tailwind CSS v4
• Jest + Testing Library + jest-axe (testes de acessibilidade)
• Storybook 10 + addon-a11y
• tsup (build da biblioteca)
• eslint-plugin-jsx-a11y

Testes

92 testes cobrindo:

• Renderizacao e semantica HTML
• Atributos ARIA
• Navegacao por teclado (Tab, Enter, Escape, setas)
• Estados (disabled, loading, erro)
• Validacao automatica com jest-axe (sem violacoes WCAG)

Autor

Dorival Soares da Silva Junior Engenharia de Software - UTFPR Campus Dois Vizinhos Orientador: Prof. Dr. Erinaldo da Silva Pereira

Licenca

MIT