# PularParaOConteudo

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

O primeiro elemento focável da página: leva o teclado direto ao conteúdo principal, por cima da navegação (WCAG 2.4.1). Fica invisível até receber o foco. O PageLayout já o traz.

- Função: Navegação e estrutura
- Também chamado de: skip link, pular navegação, ir para o conteúdo, link de salto
- Mora em: `app/components/atoms/PularParaOConteudo.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/PularParaOConteudo](https://phorte-design-system.vercel.app/styleguide/peca/PularParaOConteudo)
- Ficha no Storybook: [components-base-pularparaoconteudo](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-base-pularparaoconteudo--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/PularParaOConteudo/0](https://phorte-design-system.vercel.app/previa/PularParaOConteudo/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 { PularParaOConteudo } from '@/app/components/atoms/PularParaOConteudo';

<PularParaOConteudo>…</PularParaOConteudo>
```

## Uso

### Variantes na ficha

1. [Padrão](https://phorte-design-system.vercel.app/previa/PularParaOConteudo/0)
2. [Outro texto](https://phorte-design-system.vercel.app/previa/PularParaOConteudo/1)

Em toda página com navegação repetida antes do conteúdo — no site, pelo PageLayout, que já o inclui.

### Quando não usar

Dentro de uma seção ou de uma peça: é um por página, o primeiro foco. Para pular dentro de uma página longa (as seções do curso), o CourseTabs.

### Faça

- Ponha-o como o primeiro elemento da página, antes da Navbar.
- Marque o conteúdo principal com o mesmo `id` do `alvo` (padrão `conteudo`) e `tabIndex={-1}`, para ele receber o foco.
- Monte a página com o PageLayout, que já faz as duas coisas.

### Evite

- Mais de um por página: o primeiro Tab tem de ser sempre este.
- Escondê-lo com `display: none`: aí ele não recebe foco; o `sr-only` da peça esconde sem tirar do Tab.

### Anatomia

1. **Link** — Recortado (`sr-only`) até o foco; com foco, aparece no canto de cima, em `--card`, com sombra e o anel, acima de tudo (`--z-pular-para-o-conteudo`).
2. **Alvo** — O `<main>` com o `id` do `alvo` e `tabIndex={-1}`.

### Estados

| Estado | O que muda |
| --- | --- |
| Sem foco | Invisível, mas presente para o leitor e para o Tab. |
| Com foco | Aparece no canto de cima, com 44px de altura. |

### Comportamento

| Situação | O que acontece |
| --- | --- |
| Primeiro Tab da página | O link aparece com o foco — testado na ficha. |
| Enter | O foco vai ao conteúdo principal, e o próximo Tab continua de lá — testado na ficha. Sem JavaScript, o `href` leva até lá. |

### Relacionados

- [PageLayout](https://phorte-design-system.vercel.app/styleguide/md/PageLayout.md) — O molde de página, que já o inclui.
- [Navbar](https://phorte-design-system.vercel.app/styleguide/md/Navbar.md) — A navegação que ele pula.
- [CourseTabs](https://phorte-design-system.vercel.app/styleguide/md/CourseTabs.md) — Para pular entre seções de uma página longa.

## Especificação

### Propriedades

| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `alvo` | `string` | `'conteudo'` | não | O `id` do conteúdo principal, sem o `#` (padrão `conteudo`). O alvo precisa de `tabIndex={-1}`. |

Aceita também: `Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>`.

### Tokens de cor

| Token | Valor | Usado como |
| --- | --- | --- |
| `--card` | #FFFFFF | `bg-card` |
| `--foreground` | #1A1A1A | `text-ink` |
| `--ring` | var(--footer-red)), decisão da revisão 2. Se outra peça precisar
   * dele como superfície, o nome vira de papel (ex.: --surface-brand-strong). */
  --footer-red: #7D1B1B | `ring-ring` |

## Acessibilidade

### Teclado

| Tecla | Faz |
| --- | --- |
| Tab | Primeira parada da página: o link aparece. |
| Enter | Leva o foco ao conteúdo principal, por cima da navegação. |

### Leitor de tela

- Cumpre a WCAG 2.4.1 (pular blocos): sem ele, quem usa teclado atravessa as mais de trinta paradas da Navbar em cada página.
- O foco vai ao alvo por JavaScript, além do `href`: nem todo navegador move o foco num salto de âncora.

### O que sustenta o estado

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

## Status e recursos

| Tipo | Recurso | Status |
| --- | --- | --- |
| Código | `app/components/atoms/PularParaOConteudo.tsx` | Disponível |
| Ficha | https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-base-pularparaoconteudo--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/atoms/PularParaOConteudo.tsx