Automattic / Automattic/jetpack

Map block: Increase map accessibility when using Mapkit

Open
#38,986 1 comment 0 reactions 0 assignees View on GitHub
[Block] Map [Focus] Accessibility [Pri] Normal [Status] Stale
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Issue

When the Map block is using Mapkit (WoA and Simple sites primarily), navigating the map using a keyboard isn't possible in the editor. It also doesn't appear to be possible to navigate to the zoom controls or compass icons on the map in the editor. On the front-end, it also isn't possible to navigate the map (move around) using a keyboard, though selecting the zoom controls and compass icons is possible there.

This is in contrast to Mapbox (self-hosted sites), where it is possible to move around a map within a Map block using the arrows on a keyboard on both the front-end and editor, and once there to tab to available buttons (zoom controls in the editor, plus the full-screen icon on the front-end).

### Testing the issue on self-hosted sites

On a self-hosted site it is possible to test with Mapkit by setting `document.cookie = "map_provider=mapkit";` in a browser console.

Contributor guide

Open the contributing guide

Research direction

Start with the Map block using the documented `map_provider=mapkit` cookie, then reproduce keyboard navigation in both the editor and front end. Compare the Mapkit behavior with the existing Mapbox behavior; done means keyboard users can move around the map and reach the available zoom, compass, and context-specific controls in both locations.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
accessibility, frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.