Skip to content

Use Up and down arrow keys in note field to select notes#10597

Merged
riknoll merged 3 commits intomicrosoft:masterfrom
microbit-matt-hillsdon:note-field-keyboard-accessibility
May 23, 2025
Merged

Use Up and down arrow keys in note field to select notes#10597
riknoll merged 3 commits intomicrosoft:masterfrom
microbit-matt-hillsdon:note-field-keyboard-accessibility

Conversation

@glastonbridge
Copy link
Contributor

Enable the user to select a note value via the keyboard using the up and down arrow keys.

Screen.Recording.2025-05-20.at.09.57.01.mov

This is an unusual field for keyboard navigation because the Block's "frequency" input remains focused rather than moving focus to the piano view as an editor would. To make the piano view into a separate keyboard-navigable widget would be a larger piece of work. I suggest this as a pragmatic improvement that improves accessibility and makes the editor more engaging to keyboard users without otherwise changing the note field.

Live demo: https://note-field-keyboard-accessib.review-pxt.pages.dev/

Testing

  1. Enable keyboard navigation.
  2. Add a "Play Tone" block from the "Music" flyout.
  3. Navigate to the block using the keyboard and activate the block
  4. You can type in a frequency value as before or interact with a mouse, but also press up and down to navigate keys within the piano view

};

protected widgetDispose_(): void {
this.htmlInput_.addEventListener("keydown", this.keyHandler);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this be removeEventListener?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, yes it definitely should! Fixed.

@riknoll riknoll enabled auto-merge (squash) May 23, 2025 16:33
@riknoll riknoll merged commit c5b6919 into microsoft:master May 23, 2025
12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants