mapbox/mapbox-gl-js

[accessibility] Accessible target size for controls

Aperta

#11.037 aperta il 18 set 2021

Vedi su GitHubGuida contributor
 (1 commento) (2 reazioni) (0 assegnatari)JavaScript (2203 fork)batch import
good first issue

Metriche repository

Star
 (10.532 stelle)
Metriche merge PR
 (Metriche PR in attesa)

Descrizione

The WCAG 2.1 SC 2.5.5 Target Size requires targets for pointer input to be at least 44 by 44 in CSS pixels. Meeting this requirement has multiple benefits, it'd be great to pass this criteria for the commonly used controls:

  • Attribution control (mapboxgl-ctrl-attrib-button)
  • Popup close button (mapboxgl-popup-close-button)
  • Fullscreen control (mapboxgl-ctrl-fullscreen)
  • Location control (mapboxgl-ctrl-geolocate)
  • Markers (mapboxgl-marker)
  • Navigation controls:
    • Zoom in (mapboxgl-ctrl-zoom-in)
    • Zoom out (mapboxgl-ctrl-zoom-out)
    • Compass/reset bearing (mapboxgl-ctrl-compass)
  • etc.?

It may not be desirable to increase the size of the icons themselves, in which case padding can be used to increase the size of the tap targets.

Guida contributor

Direzione di ricerca
Questa issue richiede di garantire che i controlli interattivi in mapbox gl js soddisfino i requisiti di dimensione target WCAG 2.1 aggiungendo padding CSS per aumentare l'area di tap target ad almeno 44x44 pixel CSS. I controlli identificati includono: pulsante di attribuzione, pulsante di chiusura popup, controlli schermo intero/geolocalizzazione, marcatori e pulsanti di zoom/bussola di navigazione. Cerca le classi dei controlli come 'mapboxgl ctrl attrib button', 'mapboxgl popup close button', ecc. nei file sorgente CSS (probabilmente in 'src/css/'). Aggiungi padding a questi elementi mantenendo invariata la dimensione dell'icona. Verifica che il padding non interrompa il layout. L'issue non ha PR collegati, quindi l'implementazione è aperta. Rivedi il documento di comprensione WCAG linkato nell'issue per una guida.
Tech stack
javascript
Dominio
frontend
Tipo issue
Accessibilità
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 ore
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
GitCSS
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
80