mapbox/mapbox-gl-js

[accessibility] Accessible target size for controls

Open

#11.037 aberto em 18 de set. de 2021

Ver no GitHub
 (1 comment) (1 reaction) (0 assignees)JavaScript (2.203 forks)batch import
good first issue

Métricas do repositório

Stars
 (10.532 stars)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

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.

Guia do colaborador

Direção de pesquisa
Esta issue pede para garantir que os controles interativos no mapbox gl js atendam aos requisitos de tamanho de destino do WCAG 2.1, adicionando preenchimento CSS para aumentar a área de toque para pelo menos 44x44 pixels CSS. Os controles identificados incluem: botão de atribuição, botão de fechar popup, controles de tela cheia/geolocalização, marcadores e botões de zoom/bússola de navegação. Procure pelas classes de controle como 'mapboxgl ctrl attrib button', 'mapboxgl popup close button', etc. nos arquivos de origem CSS (provavelmente em 'src/css/'). Adicione preenchimento a esses elementos mantendo o tamanho do ícone inalterado. Teste se o preenchimento não quebra o layout. A issue não tem PRs vinculados, então a implementação está aberta. Revise o documento de entendimento do WCAG vinculado na issue para orientação.
Pilha de tecnologia
javascript
Domain
frontend
Tipo Issue
Acessibilidade
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
GitCSS
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
80