a11y(portale): la pill di stato non ripete quello che lo screen reader ha gia' sentito

L'icona porta gia' uno sr-only con lo stato esteso, su tutti e quattro gli stati. Senza
aria-hidden sulla pill, i due che ce l'hanno venivano annunciati due volte: "In corso —
ci stiamo lavorando noi", titolo, "In corso". La pill e' ridondanza *visiva*, che e'
esattamente cio' che chiede il design system; per l'assistive tech e' rumore.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-22 14:27:39 +02:00
parent 2e9bd2ab60
commit 8b54f48afd
@@ -111,13 +111,20 @@ export function TaskStatusIcon({ status }: { status: TaskStatus }) {
);
}
/** Etichetta di testo. Nulla per "da fare" e "fatto", che si leggono da soli. */
/**
* Etichetta di testo. Nulla per "da fare" e "fatto", che si leggono da soli.
*
* `aria-hidden` perché è ridondanza *visiva*: allo screen reader lo stato lo dice già
* lo `sr-only` dell'icona, su tutti e quattro gli stati. Senza questo, i due che hanno
* la pill verrebbero annunciati due volte.
*/
export function TaskStatusPill({ status }: { status: TaskStatus }) {
const v = TASK_STATUS_VISUALS[status];
if (!v.pill) return null;
return (
<span
aria-hidden="true"
className={`shrink-0 rounded px-1.5 py-0.5 text-[9px] font-bold uppercase leading-none tracking-wide ${v.pill}`}
>
{TASK_STATUS_LABELS[status]}