Add support for a dropdown menu separator

[microbit-robert]

Check for duplicates

• I have searched for similar issues before opening a new one.

Problem

MakeCode inserts an empty dropdown item with role="separator" and custom styling into some dropdowns to separate values from actions. This dropdown item is not treated any differently as far as keyboard navigation is concerned. As a result, when moving up and down inside the dropdown, the menu separator takes the selection, albeit in a non-obvious way. See the video below for an example of this. Keyboard navigation should only visit the 4 'real' items in this dropdown, however, it also visits the menu separator as a 5th item.

Screen.Recording.2025-01-30.162244.mp4

Request

Please can you consider adding support for menu separators in dropdowns? Keyboard handling and aria roles for these separators can then be implemented correctly and centralized in Blockly. An alternative might be the ability to pass options for a menu item that could include removing it from other keyboard navigable items in some way.

Alternatives considered

No response

Additional context

I have opened a PR in MakeCode in an attempt to fix this issue, however, it is very much a workaround added to an existing workaround.

[cpcallen]

Notes from triage:

• Yes, we'd like to do this.
• Probably via by adding | string to the MenuOption type in core/field_dropdown.ts, with the string "separator" denoting a separator (allowing extensibility for other special menu pieces).