learn.svelte.dev icon indicating copy to clipboard operation
learn.svelte.dev copied to clipboard

Motion / Springs tutorial has A11y errors

Open LWChris opened this issue 1 year ago • 2 comments

On Part 2 / Motion / Springs the svg element has an accessibility warning:

A11y: <svg> with mousemove, mousedown, mouseup handlers must have an ARIA role

I'm no expert in ARIA yet, but I tried role="application" just to see what would happen; unfortunately, all that did was to change the error into

A11y: Non-interactive element <svg> should not be assigned mouse or keyboard event listeners.

It feels like this is a hard coded dead end, because if application cannot greenlight mouse or keyboard events, then what can?

Not sure if the example is actually bad style or if the second warning is nonsense and should accept role="application".

LWChris avatar Oct 12 '23 08:10 LWChris

Note: Part 2 / Actions / The use directive has a similar problem with its div:

A11y: <div> with click, keydown handlers must have an ARIA role

LWChris avatar Oct 12 '23 09:10 LWChris

role="presentation" removes the error, but it would be nice if they updated the tutorial there.

Part 2 / Advanced Bindings / Binding to component instances also has an aria issue.

A11y: <div> with click, keydown handlers must have an ARIA role

cakeeater avatar Dec 04 '23 19:12 cakeeater