Skip to content

Fix: improve accessibility for toolbar and menu buttons#5280

Closed
nishtha-agarwal-211 wants to merge 4 commits intosugarlabs:masterfrom
nishtha-agarwal-211:accessibility/improve-toolbar-menu-buttons
Closed

Fix: improve accessibility for toolbar and menu buttons#5280
nishtha-agarwal-211 wants to merge 4 commits intosugarlabs:masterfrom
nishtha-agarwal-211:accessibility/improve-toolbar-menu-buttons

Conversation

@nishtha-agarwal-211
Copy link

@nishtha-agarwal-211 nishtha-agarwal-211 commented Jan 22, 2026

Fixes: #5113

Summary

Improve accessibility for toolbar and menu buttons

Description

This PR improves the accessibility of toolbar and menu buttons in index.html so they work better with keyboard navigation and screen readers.

The changes are small and focused only on accessibility. There are no visual or behavior changes.

Changes Made

  • Added role="button" to interactive elements (56 total) without href attributes
  • Added tabindex="0" to make all toolbar and menu buttons keyboard-focusable
  • Added aria-label attributes to 30 icon-only buttons for better screen reader announcements
  • Added aria-disabled="true" to the disabled Planet icon button

Affected Elements

  • Main Toolbar: 12 buttons (Play, Stop, Record, Save, Load, etc.)
  • Auxiliary Toolbar: 16 buttons (Run Slowly, Themes, Languages, etc.)
  • Dropdown Menus: 37 menu items (Save formats, Languages, Themes)

Testing

  • Used Tab key to navigate through buttons
  • Checked that buttons are announced as buttons instead of links
  • Verified icon buttons have readable labels
  • Verified disabled Planet button is announced as disabled

Result

  • Better keyboard navigation
  • Better screen reader support
  • No visual or functional regressions

No JavaScript, CSS, or structural HTML changes were made.

@github-actions
Copy link
Contributor

✅ All Jest tests passed! This PR is ready to merge.

@zealot-zew
Copy link
Contributor

hey, i have tested this PR and the keyboard navigations are not working. Not sure about the screen reader.

@github-actions
Copy link
Contributor

✅ All Jest tests passed! This PR is ready to merge.

@nishtha-agarwal-211
Copy link
Author

Thanks for testing and pointing this out!

I’ve pushed a follow-up commit that enables proper keyboard activation using Enter and Space for toolbar and menu buttons.

I’ve tested the changes using Tab navigation and verified that buttons are now focusable and activatable via keyboard.

Please let me know if you’re able to re-test or if any additional accessibility improvements are needed.

@github-actions
Copy link
Contributor

github-actions bot commented Feb 5, 2026

✅ All Jest tests passed! This PR is ready to merge.

@vanshika2720
Copy link
Contributor

@nishtha-agarwal-211 Copy of #5114 .Close duplicate PR's so maintainer can review easily

@nishtha-agarwal-211
Copy link
Author

Thank you for pointing it out.
I wasn't aware that this was a duplicate of #5114.
Closing this PR to avoid duplication and make review easier.

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.

Fix: Improve Accessibility for Toolbar and Menu Buttons

3 participants