# CurriculumAccordion

> Componentes / Cursos e matrícula · Estado: **Em andamento** — Implementado e utilizável, mas ainda sem a validação completa de acessibilidade.

Seção "O que você irá Aprender?" de página de campanha: chapéu "Conteúdo Programático", título, descrição e a grade curricular num Accordion, cada módulo com a lista de disciplinas. Os módulos vêm por `modulos` (E77); sem a prop, entra a grade de exemplo (um curso de tradução). A grade sozinha, sem a seção, é a `ListaCurricular` — a peça única de currículo, que o Cursos Livres também usa.

- Função: Cursos e matrícula
- Também chamado de: grade curricular, conteúdo programático, matriz curricular, disciplinas
- Mora em: `app/components/organisms/marketing/CurriculumAccordion.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/CurriculumAccordion](https://phorte-design-system.vercel.app/styleguide/peca/CurriculumAccordion)
- Ficha no Storybook: [marketing-curriculumaccordion](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/marketing-curriculumaccordion--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/CurriculumAccordion/0](https://phorte-design-system.vercel.app/previa/CurriculumAccordion/0)
- Todas as peças: [https://phorte-design-system.vercel.app/llms.txt](https://phorte-design-system.vercel.app/llms.txt)

## Como usar no código

```tsx
import { CurriculumAccordion } from '@/app/components/organisms/marketing/CurriculumAccordion';

<CurriculumAccordion />
```

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/CurriculumAccordion/0)
2. [Outra grade](https://phorte-design-system.vercel.app/previa/CurriculumAccordion/1)

Em página de campanha de um curso, como vitrine do padrão de grade curricular.

### Quando não usar

Para a grade sem a seção em volta (dentro de uma página de curso), use a `ListaCurricular` exportada daqui. Para perguntas frequentes, o FAQ.

### Faça

- Passe `modulos`: título, subtítulo (carga, semestre), `itens` (as disciplinas) e `descricao`.

### Evite

- Publicar com a grade de exemplo: é de um curso de tradução específico.

### Anatomia

1. **Chapéu** — "Conteúdo Programático", pílula vermelha clara com ícone.
2. **Título** — Typography `h2`, com "Aprender?" em vermelho.
3. **Descrição** — Parágrafo cinza.
4. **Grade** — A `ListaCurricular` (E77): um Accordion; cada item é um módulo com subtítulo, o texto e a lista de disciplinas com visto.

### Estados

| Estado | O que muda |
| --- | --- |
| Fechado | Só os semestres; um aberto por vez (Accordion sem `allowMultiple`). |
| Aberto | A lista de disciplinas do semestre. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Abrir um semestre | Fecha o que estava aberto e mostra as disciplinas — medido. |
| Entrada na tela | Abaixo da dobra, sobe 20px e aparece ao entrar na tela, uma vez. O HTML do servidor já sai visível, e o que está à vista ao abrir não é escondido — sem JavaScript, nada some (E138, testado). Com movimento reduzido, não anima. |

### Relacionados

- [Accordion](https://phorte-design-system.vercel.app/styleguide/md/Accordion.md) — O acordeão que ele usa.
- [CourseTabs](https://phorte-design-system.vercel.app/styleguide/md/CourseTabs.md) — As seções da página do curso.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `modulos` | `ModuloDoCurriculo[]` | `MODULOS_PADRAO` | não | Os módulos por prop (E77): eram fixos no arquivo. |

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--primary` | #D42B2B | `bg-primary/10`, `text-primary` |
| `--foreground` | #1A1A1A | `text-ink` |
| `--muted` | #F4F6F9 | `bg-muted/30` |
| `--muted-foreground` | #595959 | `text-muted-foreground` |
| `--primary-dark` | #A81E1E | `text-primary-dark` |
| `--success` | #2E844A | `text-success` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Passa pelos semestres; o aberto tem o painel entre ele e o próximo — medido. |
| Enter / Espaço | Abre ou fecha o semestre (ver Accordion). |

### Leitor de tela

- Cada semestre é um cabeçalho de nível 3 com o botão dentro, como no Accordion.
- O nome do botão começa pelo subtítulo ("A base técnica para tradutores…") e só depois diz o semestre — medido.

### O que sustenta o estado

Usa os padrões: estatico. Falta ouvir com leitor de tela: estatico.

### Achados abertos

- **O subtítulo vem antes do semestre no nome.** O Accordion põe o subtítulo antes do título no botão; aqui, "1º Semestre" é lido depois da frase de apoio.

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/organisms/marketing/CurriculumAccordion.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/marketing-curriculumaccordion--docs | Disponível |
| Teste de acessibilidade | axe em `npm run test` | No gate de todo commit |
| Leitor de tela | Passada da E33 | Falta ouvir |
| Design | Figma | Desativado até a Fase 2 |

### Histórico

- `0298af8` 2026-09-30 — E147: fechamento da Entrega 11 — REPORT.md, verificação cross-agent e o gate estático estrito
- Histórico completo no GitHub: https://github.com/srbunnie/Pos-Phorte-Design-System/commits/main/app/components/organisms/marketing/CurriculumAccordion.tsx