pxt-microbit icon indicating copy to clipboard operation
pxt-microbit copied to clipboard

[Keyboard navigation - MakeCode editor] Visually not clear when Blocks-Javascript-Python options highlighted

Open microbit-lucy opened this issue 11 months ago • 0 comments

Describe the bug If you navigate the MakeCode editor using a keyboard, pressing the tab key steps through the menu options. However, you cannot see when the Blocks, Javascript & Python options are highlighted (i.e. the :focus-visible styling isn't clear). It fine for other menu items: Home, Share, Help, Settings, Account as a white border around the menu.

  • Blocks option: becomes subtly greyer but very hard to see
  • Javascript option: is greyed out already, does get slightly darker but very hard to see
  • Python option: can't be seen at all as it's in a sub-menu that doesn't expand when that option is hightlight, only the arrow to this menu is subtly highlight but that is hard to see.

To Reproduce Steps to reproduce the behavior:

  1. Go to 'https://makecode.microbit.org/#editor'
  2. Press tab several times

https://github.com/microsoft/pxt-microbit/assets/102724242/ae8008f5-f289-4dc5-b1dc-2f3b88d92570

Expected behavior Ensure the :focus-visible styling is clear for each of the 3 coding language options so the user can see which is selected.

microbit-lucy avatar Mar 13 '24 16:03 microbit-lucy