Skip to content

Increase map control button target sizes to 44px - #13708

Open
Sor03-JP wants to merge 1 commit into
mapbox:mainfrom
Sor03-JP:fix-11037-accessible-control-targets
Open

Increase map control button target sizes to 44px#13708
Sor03-JP wants to merge 1 commit into
mapbox:mainfrom
Sor03-JP:fix-11037-accessible-control-targets

Conversation

@Sor03-JP

Copy link
Copy Markdown

Summary

This PR increases the pointer target size of buttons inside .mapboxgl-ctrl-group from 32×32px to 44×44px.

This applies to:

  • NavigationControl zoom and compass buttons
  • GeolocateControl
  • FullscreenControl
  • IndoorControl

The visual size of the icons remains unchanged.

Partially addresses #11037.

Scope

This PR only updates buttons that share the .mapboxgl-ctrl-group button styles.

The following targets from #11037 are intentionally left for separate changes:

  • Attribution control
  • Popup close button
  • Marker

Testing

Automated checks:

  • npm run lint-css
  • npm run tsc
  • npm run lint
  • git diff --check

Manual testing:

  • Verified that Zoom in, Zoom out, Compass, Geolocate, and Fullscreen buttons have a 44×44px bounding box.
  • Verified click interactions for the affected standard controls and IndoorControl floor buttons.
  • Verified keyboard focus and Tab navigation.
  • Verified Compass click and drag interactions.
  • Verified the controls at a 320px viewport width.
  • Verified that IndoorControl floor buttons have a 44×44px bounding box and remain operable.
  • Confirmed that the icons are not visually enlarged.

No automated test was added because the existing unit tests do not load the production CSS or measure rendered element dimensions. The resulting 44×44px bounding boxes were verified manually in the browser using getBoundingClientRect().

Screenshots

Standard controls at a 320px viewport

Standard map controls at a 320px viewport width

IndoorControl

IndoorControl floor buttons and navigation controls with 44px pointer targets

Additional notes

Custom controls that place buttons inside .mapboxgl-ctrl-group will also inherit the new 44×44px dimensions.

There are no public API, performance, shader, or Mapbox GL Native changes.

cc @mapbox/map-design-team @mapbox/static-apis

Launch Checklist

  • Make sure the PR title is descriptive and preferably reflects the change from the user's perspective.
  • Add additional detail and context in the PR description (with screenshots/videos if there are visual changes).
  • Manually test the debug page.
  • Write tests for all new functionality and make sure the CI checks pass.
  • Document any changes to public APIs.
  • Post benchmark scores if the change could affect performance.
  • Tag @mapbox/map-design-team @mapbox/static-apis if this PR includes style spec API or visual changes.
  • Tag @mapbox/gl-native if this PR includes shader changes or needs a native port.
  • Tag @mapbox/gl-native if this PR disables any test because it also needs to be disabled on their side.
  • Create a ticket for gl-native to groom in the MAPSNAT JIRA queue if this PR includes shader changes or features not present in the native side or if it disables a test that's not disabled there.

@Sor03-JP
Sor03-JP requested a review from a team as a code owner July 27, 2026 05:46
@Sor03-JP
Sor03-JP requested review from underoot and removed request for a team July 27, 2026 05:46
@CLAassistant

CLAassistant commented Jul 27, 2026

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

@github-actions

Copy link
Copy Markdown

Hey, @Sor03-JP 👋 Thanks for your contribution to Mapbox GL JS!

Important: This repository does not accept direct merges. All changes go through our internal review process.

What happens next:

  1. A team member will review your PR here first
  2. If it looks good, they will import it to our internal repository for further review
  3. If approved, changes will be synced back here via our release process

Please respond to any review comments on this PR. For more details, see CONTRIBUTING.md.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants