Melody editor strange UX for mixed mode (keyboard/mouse)

[kmcnaught]

Describe the bug
With keyboard controls turned on, mixed mode use (mouse+keyboard) is extremely confusing, inconsistent, and unhelpful. Clicking on a 'note' in the melody (one of the small squares in the grid) should set the focus for keyboard controls, so that e.g. you can get started with a pointer action and then edit with arrow keys. This does not happen, instead the behaviour of arrow keys varies depending on the (not visible) current focus:

• sometimes arrow keys do nothing
• sometimes they toggle the melody editor/gallery
• sometimes they function correctly in editing the melody, but without any keyboard focus indicator so it's very hard to use.

To Reproduce
Steps to reproduce the behavior:

1. Turn on keyboard controls
2. Click on a melody field
3. Click on a 'note' (small white square)
4. Use arrow keys - nothing happens
5. Click on the editor/gallery toggle twice to get back to the editor
6. Click on a 'note' (small white square)
7. Use arrow keys - up/down do nothing, left/right swap between editor / gallery
8. Click on a gap between 'notes'
9. Use arrow keys - you navigate as expected, but without any focus indicators, and current selection is set to the first column (i.e. not where you clicked)

Expected behavior
Keyboard navigation should work 'locally' to where you clicked. i.e. after clicking on a 'note' you should be able to use arrow nav relative to there.

Demo
video demo - 2 minutes, with narration

In the video I also demo similar issues in the "show LEDs" block. I assert that this is a UX bug there too, but I suspect the weirdness of this block doesn't lead to a satisfactory solution.

micro:bit version (please complete the following information):
N/A

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Safari