microsoft / microsoft/pxt-microbit

Poor focus indicators in zoomed in debug mode

Open
#6,591 0 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

Two contexts where keyboard focus indicators are insufficient:

Exit debug mode

At any zoom level, enter debug mode and then tab to the "exit debug mode" button.

Without focus:
Screenshot showing button with purple background in purple context

With focus:

Screenshot showing button with slightly darker purple

Floating sim controls - zoomed in

With zoom high enough that the simulator 'pops out' from the docked sidebar, the floating sim controls have strange and hard to interpret focus indicators. Also, the tab order is weird so getting to "Exit Debug Mode" is hard.

video demo

Expected behavior
I should always be able to see my keyboard focus clearly.

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 by reproducing debug mode at different zoom levels, tabbing to the “Exit debug mode” button and through the floating simulator controls. Compare focus visibility and tab order in both contexts; done means keyboard focus is consistently clear and the exit control is reachable predictably.

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
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.