[VPAT] Fixes 5 wcag violations in arrow keys and pause play#72164
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR addresses VPAT/WCAG accessibility issues by improving screen-reader labeling and keyboard operability for playback controls and on-screen arrow buttons used in Studio-style levels.
Changes:
- Add an
aria-labelto the Dance song preview play/pause button. - Add
aria-labels to on-screen arrow buttons and enable Enter/Space to trigger the same behavior as keyboard arrow presses.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| apps/src/templates/ArrowButtons.jsx | Adds aria-labels and keyboard handlers to make arrow soft-buttons keyboard operable. |
| apps/src/dance/SongSelector.tsx | Adds an aria-label to the preview play/pause button for screen readers. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
molly-moen
approved these changes
Apr 15, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Gives the pause/play button a corresponding aria-label
(Trickier) adds labels and key handlers to the arrow key buttons. I opted to match the exact studio implementation by calling a keyPress to ensure that pressing the buttons with enter behaves the same way as using the arrow keys on a keyboard would.
Before: A use pressed run and the game starts listening for arrow key presses, but the arrow buttons below the visualization were not navigable. A user could press the arrows with a mouse or press the arrow keys on their own keyboard, but could not navigate to them and use them that way.
After: Now a user can activate the arrow keys in three ways- by pressing them with a mouse, navigating to them and pressing enter or space, or leaving focus wherever on the page but using their keyboard arrow keys.
PausePlay before:
Screen.Recording.2026-04-15.at.1.20.30.PM.mov
PausePlay after:
Screen.Recording.2026-04-15.at.1.24.08.PM.mov
Arrow keys before: (hard to tell, but I'm trying to activate the poorly labeled buttons and nothing happens)
Screen.Recording.2026-04-15.at.1.51.59.PM.mov
Arrow keys after:
Screen.Recording.2026-04-15.at.1.51.22.PM.mov
Links
Testing story
Deployment notes
Privacy and security