microsoft / microsoft/pxt-microbit

[Screen Reader] Narrator focus outline does not fully cover tab items and Shareable link box in Share dialog

Open
#6,955 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Describe the bug
When using Windows 11 Narrator, the screen reader focus (blue outline) does not fully cover the focused elements (Blocks/Python/JavaScript tab items and Shareable link box) in the Share dialog during keyboard navigation.

Steps to reproduce the behavior:

  1. Enable Windows 11 Narrator.
  2. Navigate to Microsoft MakeCode for micro:bit.
  3. Use Tab to focus on a project card containing the Share button.
  4. Continue pressing Tab and Enter to open the Share dialog.
  5. Press Tab to move focus to the Share edit toggle.
  6. Press Caps Lock + Space to disable scan mode.
  7. Use Left/Right Arrow keys to navigate among Blocks / Python / JavaScript tab items.
  8. Observe the Narrator focus outline.
  9. Press Tab to move focus to the Shareable link box.
  10. Observe the Narrator focus outline.

Actual behavior
The Narrator focus outline does not fully cover the focused tab items and Shareable link box in the Share dialog.

Expected behavior
The Narrator focus outline fully encloses the focused element, clearly indicating the active tab item or Shareable link box.

Screen Recording
https://github.com/user-attachments/assets/8bea9333-d020-4c52-9898-18e6430d83fc

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

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

Reproduce the issue in the Share dialog at makecode.microbit.org/beta using Windows 11 Narrator, following the keyboard steps in the report. Inspect the Share dialog's Blocks, Python, and JavaScript tab items and Shareable link box; done means the Narrator focus outline fully encloses each focused element in Chrome, Edge, and Firefox.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.