[Screen reader] Full block fields in the flyout

[microbit-robert]

Check for duplicates

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

Description

When navigating blocks in the flyout with a screen reader, all the blocks are sensibly read out except for some full block fields (e.g., Math blocks "123"). With VoiceOver, this is just output as 'group'. "123" is not output at all.

When navigating down the blocks in the flyout and then back up, the VoiceOver cursor gets detached from browser focus - see screen shot below. This can sometimes indicate some kind of accessibility tree error.

Reproduction steps

1. Go to https://raspberrypifoundation.github.io/blockly-keyboard-experimentation/screenreader/
2. With a screen reader on, navigate to the Math category, then the "123" block in the flyout
3. Observe the incomplete screen reader output

Stack trace

Screenshots

Browsers

No response

[microbit-robert]

Update

The above only goes wrong when the renderer is Zelos. When using Geras, the block output is good.

In addition, on Firefox, when focusing a full-block field in the flyout when the renderer is Zelos, the screen reader outputs the flyout list aria-label again instead of the block aria-label.

Potential fix in recomputeAriaLabel in block_svg.ts by adding this.isInFlyout check.

recomputeAriaLabel() {
    if (this.isSimpleReporter(true, true) && !this.isInFlyout) return;

Another update
The above does not fix the issue in Firefox!

[microbit-robert]

Ok, it's because the role of listitem is on the path element and all of the useful aria attributes are on the sibling g element, which also unhelpfully includes aria-hidden="true". So this is a legitimate problem in the accessibility tree.