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:
@@ -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]}
|
||||
|
||||
Reference in New Issue
Block a user