Investigate better canonical ARIA role

[cdata]

We received some feedback that the default ARIA on <canvas> (role="image") makes it hard for some screen readers to use the built-in keyboard controls. It's possible that an alternate role, such as role="application" will lead to better results.

We could go so far as to add an aria-roledescription to clarify that this is a 3D model viewer.

[svinkle]

role="application"

To add to this, some screen readers have their own built-in arrow key commands. For example, when using JAWS or NVDA, using the arrow keys navigates and announces DOM content within the <model-viewer> element; it does not adjust the angle of the object.

Applying role="application" to the canvas element (or perhaps a container element) helps with intercepting arrow key press events; this allows these events to bypass the built-in functionality of assistive technology and go directly to the application "below."

aria-roledescription

Including the aria-roledescription would be helpful to provide more context on the content piece is the user is currently interacting with. I didn't feel the default role of "image" was accurate, since it's not static content. On focus, extra instructions will be provided to inform users of how to interact with the model, and hearing this along side an "image" might be confusing.

If we're able to decide on a common role using aria-roledescription, perhaps someday adding these extra instructions won't be required. People know how to interact with a button or input element—eventually interacting with a "3D model viewer" will be just as natural, too.

[elalish]

I think this was superseded by our other a11y changes.

[svinkle]

@elalish It wasn't; role="img" remains: template.ts#L321.

More details: Shopify/dawn#868

[elalish]

Ah, thank you; I looked for that but somehow missed it.