Chips: Accessibilità contrasto bordo default (SC 1.4.11) e disallineamenti tra artefatti

[SerenaG93]

Esiste già una discussione sul tema che ti interessa, o su un tema simile?

• Ho verificato e non esiste

Cosa

Durante l'integrazione del Design System .italia in un progetto, ho rilevato due possibili criticità relative al componente Chips.

1. Contrasto del bordo della variante default
Nelle varianti Standard e grandi e Gruppi di Chip/Gruppi di Chip con link, il token $chips-border utilizza $color-border-subtle (hsl(210, 4%, 78%)), che produce un rapporto di contrasto di circa 1,7:1 rispetto allo sfondo bianco, valore inferiore al rapporto minimo di 3:1 richiesto dal criterio WCAG SC 1.4.11 Non-text Contrast per gli indicatori visivi necessari a identificare un componente dell'interfaccia [Allegato 1].
Le Varianti di colore (primary, secondary, ecc.) presentano invece tutte un bordo con contrasto sufficiente.
Vorrei capire se questa scelta sia intenzionale (ad esempio perché il bordo è considerato non essenziale all'identificazione del componente) oppure se si tratti di un aspetto da rivedere.

2. Disallineamento tra Figma e librerie
Confrontando i diversi artefatti del Design System ho poi rilevato alcune differenze:

• Design System .italia e le relative documentazioni di Bootstrap e Angular presentano una variante di colore "secondary" con bordo hsl(210, 17%, 44%) [Allegato 2];
• La documentazione React (Design React Kit) propone invece una variante analoga denominata "info" [Allegato 3];
• Figma UI Kit non include né la variante secondary né una variante equivalente [Allegato 4].

Mi chiedo se i due aspetti possano essere correlati oppure se si tratti di scelte indipendenti.

Perché

Stiamo adottando il Design System .italia in un progetto della Pubblica Amministrazione.
È importante capire se il contrasto della variante default rappresenti una scelta intenzionale o una possibile incongruenza.

Contesto

Verifica eseguita confrontando Figma UI Kit, documentazione di Bootstrap Italia, Design Angular Kit, Design React Kit.

Altro

Allegato 1. Misurazione del rapporto di contrasto tra il colore del bordo della variante default e uno sfondo bianco: rapporto 1.7:1

Allegato 2. designers.italia.it: Variante "secondary" (bordo hsl(210,17%,44%))

Allegato 3. Design React Kit: presente variante "info" invece di "secondary"

Allegato 4. Figma UI Kit 3.8.0: nessuna variante "secondary" mappata

[Fupete]

fyi @zetareticoli

[zetareticoli]

Ciao @SerenaG93, grazie per la segnalazione. Ti rispondo in ordine:

• Il criterio WCAG SC 1.4.11 si riferisce a elementi interattivi come pulsanti o icone, con cui l'utente deve interagire; nel caso della variante standard della chip, non sono previste interazioni, la variante cliccabile infatti prevede underline sul testo per renderlo evidente; proveremo a capire se possiamo aggiornarlo già nella prossima versione;
• riguardo il disallineamento tra librerie, hai ragione, è presente, stiamo lavorando ad una nuova versione di UI Kit Italia per Figma (v4.0) che apporterà numerosi aggiornamenti e bugfixes alla libreria; per quanto riguarda BSI invece è in beta la v3.x che recepisce già molti aggiornamenti (se non guidarli); infine, per quanto riguarda React Kit, è una risorsa principalmente sviluppata dalla community quindi fai bene a segnalare il problema, ti chiederei semmai di aprire una issue dedicata su quel repo così da facilitarne la gestione.

Se hai dubbi su quanto ho scritto, fammi sapere

[SerenaG93]

Ciao @zetareticoli grazie mille per la risposta e per i chiarimenti!

Per quanto riguarda il disallineamento tra le librerie, grazie delle indicazioni, aprirò una issue dedicata per il React Kit.

Avrei invece un dubbio sul primo punto. Da quanto leggo, lo SC 1.4.11 non fa riferimento ai soli elementi interattivi, ma agli user interface components e ai graphical objects, e agli indicatori visivi necessari a identificarli.
Nel DS la variante Standard comprende anche le versioni con pulsante di chiusura, che prevedono quindi un'interazione.
In questi casi, il bordo non serve anche a delimitare il componente e a far comprendere che la "×" si riferisce proprio a quella specifica label?
Oppure anche per queste varianti ritenete che il bordo non sia da considerare un indicatore visivo necessario per SC 1.4.11?