microsoft / microsoft/pxt-microbit

Cursor movement overrides keyboard focus in grid dropdowns

Open
#6,546 1 comment 0 reactions 1 assignee View on GitHub

@microbit-matt-hillsdon is already working on this.

Since Jul 25, 2025.

keyboard navigation P2
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:

  1. 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
  2. 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:

  1. Click on the dropdown in a 'show icon' block
  2. Use arrows to move right
  3. Move your cursor over a different icon
  4. Move arrows again
  5. 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

screen recording demo

micro:bit version (please complete the following information):

not hardware related

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser Chrome

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.