bumbu/svg-pan-zoom

Add keyboard accessibility to zoom controls

Open

#347 opened on Aug 19, 2019

View on GitHub
 (1 comment) (3 reactions) (0 assignees)JavaScript (1,585 stars) (383 forks)batch import
enhancementfeature requesthelp wanted

Description

Currently, the zoom feature in this library appears to only be usable by mouse or touchpad devices.

Because the element generating the zoom in/zoom out icons are not inherently keyboard accessible, this means someone that cannot use a mouse or touchpad successfully cannot zoom in on the SVG, which could be a map or similar content. This functionality is crucial for accessibility. https://www.w3.org/TR/WCAG21/#keyboard-accessible

I would recommend adding keyboard event listeners wherever click/touchstart events are. Keyboard event listeners can look for whether the Enter or Space key is entered, and on keypress, zoom in or out accordingly depending on which button the keyboard pressed.

Additionally, the user should be able to use the arrow keys to navigate throughout the SVG and focus on certain areas, similar to the way a mouse user can drag the SVG to focus on certain areas.

This shouldn't take away from any other features, and only add more accessibility to the library.

Contributor guide

Tech stack
javascript
Domain
accessibilityfrontend
Issue type
accessibility
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic JavaScript event handlingunderstanding of SVGfamiliarity with keyboard events
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Investigate the library's event handling code, likely in the main library file (e.g., svg pan zoom.js). Identify where mouse/touch events are attached to the zoom buttons. Add keydown event listeners for Enter and Space keys to trigger zoom in/out. For arrow key navigation, attach keydown listeners to the SVG element to simulate panning. Ensure that screen reader focus management is considered. Refer to WCAG 2.1 Keyboard guidelines.