Skip to content

feat(accessibility): enable keyboard navigation for toolbar controls#5819

Merged
omsuneri merged 3 commits intosugarlabs:masterfrom
DhyaniKavya:fix/toolbar-keyboard-accessibility
Feb 21, 2026
Merged

feat(accessibility): enable keyboard navigation for toolbar controls#5819
omsuneri merged 3 commits intosugarlabs:masterfrom
DhyaniKavya:fix/toolbar-keyboard-accessibility

Conversation

@DhyaniKavya
Copy link
Contributor

@DhyaniKavya DhyaniKavya commented Feb 19, 2026

issue : #5809
Problem:
Toolbar icons function as buttons but are not keyboard focusable,
preventing keyboard navigation and violating accessibility guidelines.

Solution:
Adds role="button" and tabindex="0" to toolbar anchor elements
to enable keyboard focus and interaction.

Changes:

  • Updated index.html toolbar elements
  • No structural or styling changes
  • Minimal diff

Testing:

  • npm test passed
  • Verified keyboard tab navigation
  • HTML structure remains valid

This PR focuses only on toolbar accessibility improvements.

@github-actions
Copy link
Contributor

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

@github-actions
Copy link
Contributor

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

@DhyaniKavya
Copy link
Contributor Author

@vanshika2720
Thanks for the suggestion. I’ve split the accessibility changes into a focused PR that only adds keyboard accessibility attributes to toolbar elements and keeps the diff minimal.

Could you please confirm if this scope looks correct for the issue

@DhyaniKavya
Copy link
Contributor Author

@Commanderk3 Can you review this PR and tell me if this needs further changes or it is good to go.

@Commanderk3
Copy link
Member

@DhyaniKavya could you post a video here? On my testing I did not find any highlights on buttons when pressed TAB.

@github-actions
Copy link
Contributor

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

@DhyaniKavya
Copy link
Contributor Author

DhyaniKavya commented Feb 20, 2026

Keyboard.Accessibility.mp4

@Commanderk3 Thanks for checking this earlier. I believe the focusability was present, but the focus indicator was not clearly visible against the toolbar background, which made it appear as if focus was missing.
I’ve improved the visibility of the focus state so it is easier to notice during keyboard navigation.
I’ve attached a short screen recording demonstrating Tab navigation and activation using the keyboard. Please let me know if you’d like any further adjustments.

@Commanderk3
Copy link
Member

Yup, It is working fine now. Nice work.

@DhyaniKavya
Copy link
Contributor Author

Thankyou for Reviewing this and guiding me properly . It feels good to work with such guidance. 🙌

@DhyaniKavya
Copy link
Contributor Author

@walterbender @omsuneri please review the changes. If anything needs to change , i am open to address it. Thankyou

@omsuneri omsuneri merged commit 4bd5515 into sugarlabs:master Feb 21, 2026
7 checks passed
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.

3 participants