search

sveltejs / learn.svelte.dev

A soup-to-nuts interactive tutorial on how to build apps with Svelte
https://learn.svelte.dev
MIT License
503 stars 240 forks source link

Motion / Springs tutorial has A11y errors #518

Open LWChris opened 10 months ago

LWChris commented 10 months ago

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 commented 10 months ago

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

cakeeater commented 8 months ago

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