Skip to content

feat(a11y): add aria-labels to toolbar icons for screen reader support (#5948)#6187

Open
abhnish wants to merge 5 commits intosugarlabs:masterfrom
abhnish:accessibility-keyboard-5948
Open

feat(a11y): add aria-labels to toolbar icons for screen reader support (#5948)#6187
abhnish wants to merge 5 commits intosugarlabs:masterfrom
abhnish:accessibility-keyboard-5948

Conversation

@abhnish
Copy link
Contributor

@abhnish abhnish commented Mar 9, 2026

Summary

Part of #5948 — WCAG 2.1 AA accessibility improvements.

Changes

  • Added aria-label attributes to all main toolbar icons (play, stop,
    fullscreen, new project, open, save, planet, menu, help) in index.html
  • Added keydown (Enter/Space) event handlers in toolbar.js for
    play and stop icons

Why

Without aria-labels, screen readers announced these buttons as just
"button" with no description. This makes each button identifiable
to visually impaired users using screen readers like NVDA or VoiceOver.

Testing

  • Verified in Chrome DevTools → Accessibility panel
  • Each toolbar icon now shows a descriptive label
  • Keyboard Tab + Enter/Space navigation works on play and stop

PR Category

  • Bug Fix
  • Feature
  • Performance
  • Tests
  • Documentation

abhnish added 3 commits March 4, 2026 12:56
sugarlabs#5948)

- Add aria-label to play, stop, fullscreen, new project, open, save,
  planet, menu and help toolbar icons in index.html
- Add keydown Enter/Space handlers in toolbar.js for play and stop
- Addresses WCAG 2.1 AA screen reader accessibility requirements
@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2026

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

toolbar.test.js

@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2026

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

toolbar.test.js

@github-actions github-actions bot added the feature Adds new functionality label Mar 9, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Mar 9, 2026

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

toolbar.test.js

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

Labels

feature Adds new functionality

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant