Keyboard accessibility of image dropdowns (gestures, icons)

[microbit-matt-hillsdon]

We've been exploring the best approach to improving the accessibility of FieldImages and FieldImageDropDown.

There are two routes forward that we can see:

1. Add 2D keyboard nav, aria roles, focus visible styles, scroll into view to these two implementations in MakeCode, maybe with some sharing/deduplication between them
2. Or, a more involved but potentially better overall outcome:
   • Blockly have blockly-samples/field-grid-dropdown
   • We could improve its keyboard navigation upstream (currently it inherits a 1D implementation from the regular dropdown) and switch MakeCode to use it
   • This would likely require work from Blockly to generalise what a menu item can contain, ideally allowing an HTMLElement to give MakeCode complete control. We can explore this further with Blockly if this seems a promising route.
   • We've built some confidence this can be done with minimal visual impact on MakeCode by hacking around the lack of HTMLElement support in this demo. "on shake" has a slightly darker border colour around the items, consistent "show icon" but this could be addressed with more styling.

We think the Blockly grid dropdown post-dates MakeCode's implementations and now might be a good opportunity to align.

What do you think of the two routes? Is there anything we've not considered?

CC @riknoll @abchatra @microbit-robert

[riknoll]

i'm all for it, provided that we can support roughly the same experience.

makecode has a bunch of different takes on the grid picker throughout our targets. whatever solution we go with, would be great to make sure it's extensible and can support text, images, text+images, etc.