Convert Piano Component to navigable Grid

[TomChamberlainUK]

Add keyboard navigation to Piano component

Make the Piano component navigable via a keyboard

Description

To improve interaction with the instruments we are making them all keyboard navigable

This should include the Piano component

Users should be able to use the arrow keys to navigate between piano keys

This should highlight notes like clicking would

Notes

• Keyboard-navigable JavaScript widgets
• Whilst a grid isn't suitable, there's some good details on keyboard navigability on its MDN page

Done When

• [x] When a key is focussed pressing right focusses the next key
• [x] When a key is focussed pressing left focusses the previous key
• [x] When the last key is focussed pressing right focusses the first key
• [x] When the first key is focussed pressing left focusses the last key
• [x] Hover, current, and selected keys are distinctly styled

[TomChamberlainUK]

Listbox seems the most appropriate choice of role for this functionality

It should mostly work similar to a multi select element

Aria-orientation should be set to horizontal

The note editor should be considered an associated context menu for each note

[TomChamberlainUK]

Either listboxes as above or a group of checkboxes as suggested by the listbox mdn page

It is highly recommended using the HTML select element, or a group of radio buttons if only one item can be selected, or a group of checkboxes if multiple items can be selected, because there is a lot of keyboard interactivity to manage focus for all the descendants, and native HTML elements provide this functionality for you for free.

[TomChamberlainUK]

The work on this has been huge, and involved way more than initially anticipated

It evolved into more of an accessibility overhaul, and had a knock on effect to how scales work and how notes are selected

We now just use simple accessible checkboxes for the Piano instrument, and they update the state of the scale store when interacted with

This has far simplified the entire application whilst also improving accessibility with native functionality

So far this has meant the single note editor for colour and naming convention has been removed — This will be replaced in the future

Also root notes are no longer highlighted, this will also be fixed with high urgency

The Guitar component still needs to be updated to handle the new changes