microsoft / microsoft/pxt-microbit

Default keyboard: Incorrect Focus Order for Play Video Lesson/Share and Tutorial Buttons in Details Dialog

Open
#6,895 2 comments 0 reactions 1 assignee View on GitHub

@jwunderl is already working on this.

Since Jun 8, 2026.

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

Description

Describe the bug
When using default keyboard navigation (Tab/Enter) within the Details dialog, the focus order across interactive elements is not logical or aligned with the visual layout and expected user workflow.
Specifically, the focus sequence for the following controls is inconsistent:

  • Play Video Lesson / Share buttons
  • Blocks / Python / JavaScript “Start Tutorial” buttons

Steps to reproduce the behavior:

  1. Navigate to Microsoft MakeCode for micro:bit.
  2. Use Tab to move focus to a card that contains both Play Video Lesson and Share buttons.
  3. Press Enter to open the Details dialog.
  4. Continue pressing Tab to navigate through all interactive elements until reaching the Close button.
  5. Observe the focus order of the action buttons within the dialog.

Actual behavior
The focus order does not follow a logical or user-friendly sequence.
Current observed order: Blocks Start Tutorial → Python Start Tutorial → JavaScript Start Tutorial → Play Video Lesson → Share → Close

Expected behavior
The focus order should follow a logical, meaningful sequence that matches the visual hierarchy and user intent.
Recommended order:
Play Video Lesson → Share → Blocks Start Tutorial → Python Start Tutorial → JavaScript Start Tutorial → Close

Screenshots
Image

Additional context
1.OS: Windows 11 25H2 & Mac Mini M2 macOS Tahoe 26.5
2.Browser: Chrome, Edge, Firefox, and Safari
3.makecode.microbit.org version: 8.1.19
4.Microsoft MakeCode version: 12.3.14

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.