# InteractiveContent

![Status](https://img.shields.io/badge/status-stable-brightgreen)

Diretiva de acessibilidade que torna qualquer elemento HTML interativo, adicionando suporte a eventos de foco e navegação por teclado (Enter e Espaço) além do clique padrão. Gerencia automaticamente o atributo `tabindex`.

## Quando usar

- Tornar elementos não-interativos (`div`, `span`, imagens) acessíveis via teclado
- Implementar cards clicáveis, itens de lista selecionáveis ou grids interativos
- Garantir conformidade com WCAG para elementos customizados que simulam botões ou links

## Quando não usar

- Elementos que já são naturalmente interativos (`button`, `a`, `input`) — use os elementos nativos
- Quando apenas o clique de mouse é necessário e a acessibilidade via teclado não é requisito

## Instalação

```typescript
import { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';

@Component({
    standalone: true,
    imports: [InteractiveContentDirective],
})
export class MeuComponent {}
```

## Uso básico

```html
<div (sInteractiveContent)="onAtivar($event)" [focusable]="true">
    Conteúdo clicável e acessível via teclado
</div>
```

## API

### Inputs

| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
|-------------|------|--------|:-----------:|-----------|
| `focusable` | `boolean` | `true` | Não | Habilita o foco via teclado adicionando `tabindex="0"` ao elemento. |
| `disabled` | `boolean` | `false` | Não | Desabilita todos os eventos de interação do elemento. |
| `stopPropagation` | `boolean` | `false` | Não | Quando `true`, chama `event.stopPropagation()` ao ativar o elemento. |

### Outputs

| Evento | Tipo | Descrição |
|--------|------|-----------|
| `sInteractiveContent` | `OutputEmitterRef<PointerEvent \| KeyboardEvent>` | Emitido quando o usuário clica ou pressiona Enter/Espaço no elemento. |

## Exemplos

### Card clicável e acessível

```html
<div
    (sInteractiveContent)="onAtivar($event)"
    [focusable]="true"
    style="padding: 16px; border: 2px solid #e5e7eb; border-radius: 8px; cursor: pointer;"
>
    <p>Elemento interativo</p>
    <p>Clique ou pressione Enter/Espaço</p>
</div>
```

### Cards selecionáveis com destaque visual

```html
@for (card of cards; track card.id) {
    <div
        (sInteractiveContent)="cardSelecionado = card"
        [focusable]="true"
        [style.border-color]="cardSelecionado === card ? '#3b82f6' : '#e5e7eb'"
        style="padding: 16px; border: 2px solid; border-radius: 8px; cursor: pointer;"
    >
        {{ card.titulo }}
    </div>
}
```

### Elemento desabilitado

```html
<div
    (sInteractiveContent)="onAtivar($event)"
    [disabled]="!temPermissao"
    style="padding: 16px; cursor: not-allowed; opacity: 0.6;"
>
    Elemento desabilitado
</div>
```

### Impedindo propagação de eventos

```html
<div (click)="onClickExterno()">
    <div
        (sInteractiveContent)="onAtivarInterno($event)"
        [stopPropagation]="true"
        style="padding: 8px; border: 1px solid #ccc;"
    >
        Clique interno (não propaga)
    </div>
</div>
```

## Acessibilidade

- Adiciona `tabindex="0"` automaticamente ao elemento quando `focusable` é `true`
- Emite o evento `sInteractiveContent` ao clicar ou pressionar Enter/Espaço
- Com `disabled: true`, o `tabindex` é definido como `-1` e eventos são ignorados
- Remove os event listeners automaticamente ao destruir o componente

## Componentes relacionados

- [`Button`](../button/README.md) — botão nativo com acessibilidade integrada; prefira quando a semântica de botão é adequada
- [`MouseEvents`](../mouse-events/README.md) — diretivas para eventos de mouse avançados (long press, double click)