Basic Catalog components not rendering accessibility attributes (was: Restaurant Finder example: accessibility of "Book Now")

[AutoSponge]

The interface produced violates WCAG 2.4.6 by creating multiple "Book Now" buttons that perform different actions.

What should happen is something like this:

<button style="..."><span style="...">Book<span class="sr-only"> Mott 32 </span>Now</span></button>
<button style="..." aria-label="book mott 32 now"><span style="...">Book Now</span></button>
<button style="..." aria-labelledby="book mott32 now"><span style="..."><span id="book">Book</span>&nbsp;<span id="mott32" style="display:none"> Mott 32 </span><span id="now">Now</span></span></button>

What's responsible for building "invisible" text of the interface? Is it the JSON (maybe the schema is incomplete), the composer, or better inference instructions?

[ditman]

What should happen is something like this [...]

I'm assuming that those 3 are 3 different acceptable options?

[AutoSponge]

@ditman yes. Those should all have similar results in the axTree.

[ditman]

According to the specification, the Button component should contain AccessibilityAttributes to set a "label" and "description".

With that definition, we should be able to produce the second option in your list:

<button style="..." aria-label="book mott 32 now"><span style="...">Book Now</span></button>

(We'd just use the label property as the aria-label of the button component when rendering it.)

I haven't looked at the responses from the restaurant_finder to see if they're passing any accessibility attributes down, but I can't find where the widgets may be rendering their aria-labels (most likely nowhere).

This is a big bug, we need to ensure the accessibility attributes are used in the frontend (and then maybe correct the restaurant_finder sample to ensure they're used there)