microsoft / microsoft/pxt-microbit

Default keyboard: The 5th and last project cards are not reachable via Tab when "My Projects" contains more than 5 items

Open
#6,840 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

keyboard navigation P2
Dominant language
TypeScript
Stars
804
Forks
721
Avg merge
2d 9h
Merged PRs (30d)
2

Description

Describe the bug
When navigating the "My Projects" section using the default keyboard (Tab key), the 5th project card and the last project card cannot be reached if the total number of projects exceeds five.

Steps to reproduce the behavior:

  1. Navigate to https://makecode.microbit.org/beta.
  2. Sign in with a valid Microsoft account.
  3. Ensure "My Projects" contains more than five projects.
  4. Press the Tab key to move focus to the "My Projects" section.
  5. Continue pressing Tab until focus reaches the 4th project card.
  6. Press Tab again.
    • Observe that focus skips the 5th project card and moves to the "See more" (right-aligned carousel arrow).
  7. Press Enter to see more projects.
  8. Continue tabbing until focus reaches the second-to-last project card.
  9. Press Tab again and observe the next focus target.

Actual behavior
The 5th project card and the last project card are skipped during Tab navigation.

Expected behavior
All project cards in "My Projects" should be reachable via sequential Tab navigation, regardless of project count. Each project card should display a visible focus indicator when focused using the Tab key.

Screen Recording
https://github.com/user-attachments/assets/cdabae61-bba1-47fc-8011-f748de7561e3

Additional context
1.OS: Windows 11 25H2
2.Browser: Chrome, Edge, and Firefox
3.makecode.microbit.org version: 8.1.15
4.Microsoft MakeCode version: 12.3.10

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at https://makecode.microbit.org/beta and reproduce the issue in the My Projects section with more than five projects using Tab. Trace the project-card and See more focus order from the relevant frontend entry point, then verify that every card is keyboard reachable and shows a visible focus indicator across the listed 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
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.