Improve aria-label for mutator workspaces

[microbit-robert]

Check for duplicates

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

Description

Mutator workspaces have role="group" and aria-label="Bubble". In VoiceOver this is read out as "Bubble, group". It would be nice if this label could be more user-friendly / descriptive. One of the reasons for this labelling to be made clear is that triggering the mutator workspace via the mutator icon also moves focus into the mutator workspace, which makes it more important for the user to know where they are / have moved to.

Reproduction steps

1. Go to the screen reader test page
2. Navigate to the one of the if block mutator icons and open it with Enter or Space
3. The screen reader will announce something like "If, selected, Bubble, group" - there might be some variation between different screen readers.

Stack trace

Screenshots

No response

Browsers

No response

[BenHenning]

It seems like the bubble is being focused before the workspace, so there may need to be different labels depending on the context or we need to consider simplifying the navigation flow here so that it goes straight to the workspace.

Separately, the workspace's label can be made a bit clearer in the mutator context. I didn't spend much time on mutators because I wasn't sure what we wanted the terminology to be for them, yet, but we can at least fix on being consistent with the term 'mutator' and adjust that term in particular once we have more testing data.

If we have to keep the bubble and workspace as separate navigation items, then we could at least distinguish between them with 'Mutator bubble' and 'Mutator workspace' until we can further refine based on user feedback. I suspect both the terms 'bubble' and 'mutator' are going to be confusing and need adjustments.

[maribethb]

The bubble should be a separate navigation item for 2 reasons:

• Mutators can remain open on the page, and you need to be able to continue navigating "around" the bubble without getting trapped inside the workspace. See improve keyboard navigation for block comments blockly-keyboard-experimentation#723 for where we don't separately focus the bubble and you can get "trapped" inside the comment. If we didn't focus the bubble separately, the same problem would apply here.
• Bubbles are movable with the mouse and we may wish to make them movable with the keyboard as well, and they would need to be focused in order to do that.

I think "mutator" shouldn't be a user-facing term and would use something like "edit this block" but not sure how to turn that into a noun, since "block editor" is ambiguous and is what I would suggest for the default workspace region label :)

[BenHenning]

Makes sense. In that case we can focus on making the labeling consistent and then actually find a better term later.