microsoft / microsoft/pxt-microbit
Cursor movement overrides keyboard focus in grid dropdowns
@microbit-matt-hillsdon is already working on this.
Since Jul 25, 2025.
- Dominant language
- TypeScript
- Stars
- 804
- Forks
- 721
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 2
Description
Context
In grid dropdowns such as "show icon", the following (correct) behaviours are observed:
mouse interaction:
- hovering causes an "on hover" outline
- clicking causes the hovered cell to be selected
keyboard interaction:
- arrow keys cause a "keyboard focus" outline
- pressing Enter or Space causes the focused cell to be selected
Describe the bug
When you are intending to use keyboard controls, but move the cursor accidentally across the grid of options, it updates your keyboard focus to the item your mouse went over. This might seem logical from an implementation perspective (both modes are updating a shared position) but this is inconsistent with web navigation patterns elsewhere, and causes real problems for the following personas:
- an eye gaze user whose system is set up to generally move the cursor to follow their gaze, but who is mainly using a grid interface to select onscreen actions such as pressing arrow keys
- a head-mouse user who is mainly using a grid interface to select keyboard controls
In the first instance it is possible to workaround by turning off any cursor controls, but only if you realise that this is what is causing the problem. In (2) this isn't possible at all, since the cursor is being used directly for all interactions.
To Reproduce
Steps to reproduce the behavior:
- Click on the dropdown in a 'show icon' block
- Use arrows to move right
- Move your cursor over a different icon
- Move arrows again
- Your selection moves relative to the last cursor position, not the last keyboard position
Expected behavior
Cursor hover and keyboard focus should be 2 separate states. Consider moving your mouse over a grid of links (e.g. the projects list in the MakeCode homepage) and then pressing the Tab key. There is no relation between the cursor position (and the element which will be selected upon left clicking) vs the tab position (and the element which will be selected by pressing Enter)
Screenshots
micro:bit version (please complete the following information):
not hardware related
Desktop (please complete the following information):
- OS: Windows 11
- Browser Chrome
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.
Assessment
This issue has not been assessed yet.