[v13.0.0-beta.2] Block label commas inconsistent

[microbit-robert]

Check for duplicates

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

Description

In the previous implementation, commas in the aria-label were used to wrap inputs in order to make these more pronounced to help screen reader users infer that these are in fact inputs. Commas in the current version are either missing, or can occur in unexpected places, perhaps before the label attached to an input. Please see the "show number" block below for an example of the latter.

Reproduction steps

Priority

No response

Stack trace

Screenshots

Details of the output aside, I would expect commas to appear in this output as follows: "to, dropdown: Variables 'item', append text, image: "text: empty image:', has input, command"

I would expect: "show number, number: 0, has input, command" whereas the comma currently occurs in between "show" and "number".

Browsers

No response

[lizschwab]

Hi Robert,

For your first example there, the fix I just pushed in which will be in the next beta cut should resolve it. However, for the second issue, that appears to be caused by how the block is built out. When inspecting the DOM in MakeCode, I found that there's some inconsistency as to how label fields are being applied to blocks. Some of the blocks, like the "show number" block in your example, are built using two field label inputs, while others like "show icon" are built using one. With the changes I've just merged in you will still continue to see a comma between "show" and "number" on that block as we do not have a way to differentiate when these field labels are meant to be read together and when they're meant to be separate, and we want to avoid being overly opinionated about that.

Here are a couple of screenshots that illustrate what I'm talking about with the way blocks are built out.

The first image is a stack of blocks I created in MakeCode. The second is the accessibility tree for this stack of blocks. You'll notice that for "show number" and "show string" those are two separate `StaticText` elements, but for "on start", "show leds", "show icon", etc. the whole text is on one `StaticText` element.

Our guidance on this is to try and build out the labels that are meant to be read together in one field label input. Please let us know if you need additional information from us or need to discuss this further.

Thanks,
Liz

[microbit-robert]

Thank you! Ahh, yes, I can now see this in the MakeCode block definitions in TypeScript, e.g., the '|' character in block="show|number %number" 😢