mapbox/mapbox-gl-js

[accessibility] Accessible target size for controls

Open

#11 037 ouverte le 18 sept. 2021

Voir sur GitHub
 (1 commentaire) (1 réaction) (0 assignés)JavaScript (2 203 forks)batch import
good first issue

Métriques du dépôt

Stars
 (10 532 stars)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

Description

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.

Guide contributeur

Direction de recherche
Cette demande vise à garantir que les contrôles interactifs dans mapbox gl js respectent les exigences de taille cible WCAG 2.1 en ajoutant un remplissage CSS pour augmenter la zone de toucher à au moins 44x44 pixels CSS. Les contrôles identifiés incluent : le bouton d'attribution, le bouton de fermeture de popup, les contrôles plein écran/géolocalisation, les marqueurs et les boutons de zoom/boussole de navigation. Recherchez les classes de contrôle comme 'mapboxgl ctrl attrib button', 'mapboxgl popup close button', etc. dans les fichiers source CSS (probablement dans 'src/css/'). Ajoutez du remplissage à ces éléments tout en conservant la taille de l'icône inchangée. Testez que le remplissage ne casse pas la mise en page. La demande n'a pas de PR liés, donc l'implémentation est ouverte. Consultez le document de compréhension WCAG lié dans la demande pour des conseils.
Stack technique
javascript
Domaine
frontend
Type d'issue
Accessibilité
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
GitCSS
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
80