microsoft / microsoft/pxt-microbit
[Screen Reader] Project card selection state (selected/unselected) is not announced on “View All My Projects” page during keyboard navigation
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 804
- Forks
- 721
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 2
Description
Describe the bug
When using a screen reader (Windows Narrator or macOS VoiceOver), the selection state of project cards (represented by the selected/unselected circle icon) is not announced on the “View All My Projects” page during keyboard navigation.
Steps to reproduce the behavior:
- Enable a screen reader:
- Windows Narrator (Windows 11) or
- VoiceOver (macOS)
- Navigate to Microsoft MakeCode for micro:bit.
- Tab to the “View All” button and press Enter.
- Open the “View All My Projects” page.
- Continue pressing Tab until focus reaches a project card.
- Press Enter repeatedly to toggle selection.
- Observe the screen reader output.
Actual behavior
The screen reader does not announce any change in selection state (selected or unselected) for the project card.
Expected behavior
The screen reader should announce the correct selection state (e.g., “selected” / “not selected”) when the project card is focused and toggled.
Screen Recording
https://github.com/user-attachments/assets/48cf9f56-9477-477e-a01b-f8f33580783e
Additional context
1.OS: Windows 11 25H2 & Mac Mini M2 macOS Tahoe 26.5.1
2.Browser: Chrome, Edge, Firefox, and Safari
3.makecode.microbit.org version: 8.1.28
4.Microsoft MakeCode version: 12.3.24
5.Screen Readers: Narrator and VoiceOver
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue on the “View All My Projects” page with Narrator or VoiceOver, then inspect the project card’s focus and toggle handling. Verify the card’s accessibility state changes when Enter toggles selection, and confirm the screen reader announces “selected” and “not selected” across the reported browsers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100