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 }) {
|
export function TaskStatusPill({ status }: { status: TaskStatus }) {
|
||||||
const v = TASK_STATUS_VISUALS[status];
|
const v = TASK_STATUS_VISUALS[status];
|
||||||
if (!v.pill) return null;
|
if (!v.pill) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span
|
<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}`}
|
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]}
|
{TASK_STATUS_LABELS[status]}
|
||||||
|
|||||||
Reference in New Issue
Block a user