Make the sidebar's status dots readable without colour

Aperta Adatta ai principianti
  • Qualcosa non va?
#776 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
72/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript, react
Ambito
accessibility, desktop-dev

Direzione di ricerca

Il punto di attenzione è stilizzato da sites-sidebar-dot in src/renderer/components/sites-sidebar.jsx, mentre il punto del server proviene da ProcessStatus in src/renderer/components/site-header-actions.jsx, che già mostra parole nell'intestazione. Inizia confrontando come i due componenti visualizzano i rispettivi punti e quali stati coprono. È completato quando ogni stato dei due punti della barra laterale può essere distinto in scala di grigi, ad esempio tramite una forma diversa o testo visibile, e i tooltip esistenti continuano a funzionare.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug ux-polish
Description

In the sites list in the sidebar, a site's status is shown only by the colour of a dot. That fails WCAG 1.4.1 (Use of Color).

  • The attention dot (#555, sites-sidebar-dot in src/renderer/components/sites-sidebar.jsx): amber means trunk is old, red means an update is incomplete. Same size and shape. The only way to tell them apart without colour is to hover the dot for its tooltip.
  • The server dot (ProcessStatus in src/renderer/components/site-header-actions.jsx): grey, green, amber and red for offline, running, busy and failed. In the site header it has words beside it, but in the sidebar it has none.

Screen readers are fine: both dots are aria-hidden and the same text follows the name as visually hidden text. The gap is for sighted users who can't tell the colours apart.

Expected: each state can be told apart without colour, for example a different shape or icon per state, or visible text.

Step-by-step reproduction instructions
  1. Have two sites: one whose trunk is more than a few days old, and one with an update left incomplete (start Update to latest trunk and quit the app during npm run build).
  2. Look at the sites list in the sidebar, in greyscale (macOS: System Settings > Accessibility > Display > Color filters > Grayscale).
  3. The two sites' attention dots look the same. Start the dev server on one site and stop it on another: the server dots also look the same apart from shade.
Screenshots, screen recording, or logs

No response

Operating system

Any

App version

trunk

Please confirm that you have searched existing issues in the repo.
  • Yes
Lingua principale
JavaScript
Stelle
66
Fork
20
Merge medio
1g 19h
PR unite (30g)
27

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di WordPress/contributor-toolkit

Tutte le issue di WordPress/contributor-toolkit

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.