microsoft / microsoft/pxt-microbit

Keyboard Navigation: Pressing Enter on Tutorial and Project Cards in Search Results Opens the Editor Instead of the Details Dialog

Open
#7,038 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

Describe the bug
When navigating the Search Results page using the keyboard, pressing Enter on a tutorial or project card opens the tutorial/project directly in the editor instead of opening the card's Details dialog.

Steps to reproduce the behavior:

  1. Navigate to Microsoft MakeCode for micro:bit.
  2. Press Tab to focus the Search button and press Enter.
  3. Enter a tutorial, example, or project name (for example, "heart") in the search box.
  4. Press Tab until focus reaches a tutorial or project card in the search results.
  5. Press Enter.
  6. Observe the behavior.

Actual behavior
Pressing Enter on a tutorial or project card opens the tutorial/project directly in the editor instead of opening the card's Details dialog.

Expected behavior
Pressing Enter on a tutorial or project card should open the card's Details dialog, consistent with the behavior of the Space key and standard keyboard accessibility expectations.

Screen Recording
https://github.com/user-attachments/assets/58a78631-8c60-4ec7-b7f4-970f314b85ed

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

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 at the Search Results page described in the reproduction steps and trace how tutorial and project cards handle Enter versus Space. Verify the card activation path and Details dialog behavior with keyboard focus. Done means Enter opens the Details dialog, matching Space, without opening the editor directly.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.