Filtro

Cos'è

Un'opzione a forma di pillola che si attiva e si disattiva, per restringere una lista.

Quando usarlo

• Per filtrare risultati: disciplina, difficoltà, periodo.
• In gruppi, quando le opzioni sono poche e conviene vederle tutte.

Quando non usarlo

• Per un'etichetta fissa: usa il badge.
• Per un'azione: usa il bottone.
• Con molte opzioni (più di 8 circa): serve un altro componente, per esempio una select.

Codice

<div role="group" aria-label="Disciplina">
  <button class="grigna-chip" aria-pressed="true">Escursionismo</button>
  <button class="grigna-chip" aria-pressed="false">Alpinismo</button>
</div>

E per farlo cambiare stato al clic:

chip.addEventListener("click", () =>
  chip.setAttribute("aria-pressed", chip.getAttribute("aria-pressed") !== "true"));

Varianti e stati

Lo stato sta in aria-pressed, non in una classe. Così l'aspetto e quello che sente lo screen reader non possono andare in disaccordo.

Token

--grigna-chip-height, -padding-x, -gap, -radius, -font, -bg, -bg-hover, -border, -text, -selected-bg, -selected-border, -selected-text (tutti con prefisso --grigna-chip).

Accessibilità

• Altezza minima 44px.
• Il gruppo ha role="group" e un aria-label che dice cosa si filtra.
• Lo stato attivo si vede anche senza colore, grazie alla spunta.

Per gli agenti

Sempre

• <button class="grigna-chip" aria-pressed="…"> dentro un role="group" con aria-label.
• Cambia stato modificando aria-pressed.

Mai

• Mai una classe tipo --selected o --active: lo stato è solo aria-pressed.
• Mai aggiungere una spunta a mano, la disegna il CSS.
• Mai colori diversi per filtri diversi (per esempio un colore per disciplina).