Add screen reader support for the melody field editor

[microbit-robert]

This PR adds screen reader support for the melody field editor

General:

• Ensures that tab toggle (editor | gallery) is accessible
• Add variables for div ids to reduce repetition and fragility
• Fix a bug where after selecting a melody from the gallery, focusing the grid would restore focus to the previously focused gridcell. This could be a note that is switched off in a column that has a different note switched on which leads to unpredictable behaviour.

Editor:

• Add an aria-label to the grid (field_matrix) explaining what it is
• Add note names to the grid cells, respect note on/off state and provide feedback via aria-live when they are toggled on and off
  • The changes here avoid using aria-labels inside of SVG elements with role="gridcell" as this causes screen readers to lag (e.g., as you are navigating, perhaps every other cell is output by the screen reader). This has required more change to the field_matrix than desired.
• Press 'p' to play the selected note without having to toggle it on/off
• The edges of the grid are hard stops - left / right no longer wrap
• Add a reactive aria-label to the play button

Gallery:

• Change the gallery markup so it is a grid. This ensures that the preview buttons are discoverable by screen reader users
• Fix the aria-activedescendant values which were wrong and causing the screen reader cursor to detach from the focus visible outlines causing confusion