Resolve a11y warnings in multiple components

[endigo9740]

Current Behavior

Expected Behavior

The a11y issues causing these warnings should be addressed.

Most warnings seem to be related to missing closing tags, which is a recent change:

• Explained by Rich Harris: https://github.com/sveltejs/svelte/issues/11052
• Explained by Theo Browne: https://www.youtube.com/watch?v=0P7wmooc95s

Steps To Reproduce

Create a Skeleton project, use any of features, the errors will appear in the terminal.

Link to Reproduction / Stackblitz

No response

More Information

We've silenced similar errors in the past, but it looks like newer versions of Svelte have implemented some additional checks.

Migration script available via:

npx svelte-migrate self-closing-tags

[salisshuaibu11]

@endigo9740 i would like to work on this

[endigo9740]

When updating to Svelte v5 RC, there appears to be a longer list of a11y warnings:

Full dump:

/Users/chris/Development/testbed/skeleton-and-svelte-v5/src/routes/+page.svelte:8:3 Self-closing HTML tags for non-void elements are ambiguous — use `<section ...></section>` rather than `<section ... />`

/Users/chris/Development/testbed/skeleton-and-svelte-v5/node_modules/.pnpm/@skeletonlabs+skeleton@2.9.2_svelte@5.0.0-next.116/node_modules/@skeletonlabs/skeleton/dist/components/ConicGradient/ConicGradient.svelte:61:2 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`

/Users/chris/Development/testbed/skeleton-and-svelte-v5/node_modules/.pnpm/@skeletonlabs+skeleton@2.9.2_svelte@5.0.0-next.116/node_modules/@skeletonlabs/skeleton/dist/components/ConicGradient/ConicGradient.svelte:69:4 Non-interactive element `<li>` should not be assigned mouse or keyboard event listeners.

/Users/chris/Development/testbed/skeleton-and-svelte-v5/node_modules/.pnpm/@skeletonlabs+skeleton@2.9.2_svelte@5.0.0-next.116/node_modules/@skeletonlabs/skeleton/dist/components/ConicGradient/ConicGradient.svelte:70:5 Self-closing HTML tags for non-void elements are ambiguous — use `<span ...></span>` rather than `<span ... />`

/Users/chris/Development/testbed/skeleton-and-svelte-v5/node_modules/.pnpm/@skeletonlabs+skeleton@2.9.2_svelte@5.0.0-next.116/node_modules/@skeletonlabs/skeleton/dist/components/Avatar/Avatar.svelte:27:0 Non-interactive element `<figure>` should not be assigned mouse or keyboard event listeners.

/Users/chris/Development/testbed/skeleton-and-svelte-v5/node_modules/.pnpm/@skeletonlabs+skeleton@2.9.2_svelte@5.0.0-next.116/node_modules/@skeletonlabs/skeleton/dist/components/ProgressBar/ProgressBar.svelte:36:1 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`

/Users/chris/Development/testbed/skeleton-and-svelte-v5/node_modules/.pnpm/@skeletonlabs+skeleton@2.9.2_svelte@5.0.0-next.116/node_modules/@skeletonlabs/skeleton/dist/components/RangeSlider/RangeSlider.svelte:64:5 Self-closing HTML tags for non-void elements are ambiguous — use `<option ...></option>` rather than `<option ... />`

/Users/chris/Development/testbed/skeleton-and-svelte-v5/node_modules/.pnpm/@skeletonlabs+skeleton@2.9.2_svelte@5.0.0-next.116/node_modules/@skeletonlabs/skeleton/dist/components/Tab/TabGroup.svelte:33:0 `<div>` with a click, keypress, keydown or keyup handler must have an ARIA role

/Users/chris/Development/testbed/skeleton-and-svelte-v5/node_modules/.pnpm/@skeletonlabs+skeleton@2.9.2_svelte@5.0.0-next.116/node_modules/@skeletonlabs/skeleton/dist/components/SlideToggle/SlideToggle.svelte:86:3 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`

/Users/chris/Development/testbed/skeleton-and-svelte-v5/node_modules/.pnpm/@skeletonlabs+skeleton@2.9.2_svelte@5.0.0-next.116/node_modules/@skeletonlabs/skeleton/dist/components/TreeView/TreeViewItem.svelte:2:16 The `accessors` option has been deprecated. It will have no effect in runes mode

/Users/chris/Development/testbed/skeleton-and-svelte-v5/node_modules/.pnpm/@skeletonlabs+skeleton@2.9.2_svelte@5.0.0-next.116/node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/Modal.svelte:163:2 `<div>` with a mousedown or mouseup handler must have an ARIA role

/Users/chris/Development/testbed/skeleton-and-svelte-v5/node_modules/.pnpm/@skeletonlabs+skeleton@2.9.2_svelte@5.0.0-next.116/node_modules/@skeletonlabs/skeleton/dist/utilities/Drawer/Drawer.svelte:137:1 `<div>` with a mousedown or keypress handler must have an ARIA role

/Users/chris/Development/testbed/skeleton-and-svelte-v5/src/routes/+page.svelte:8:3 Self-closing HTML tags for non-void elements are ambiguous — use `<section ...></section>` rather than `<section ... />`

[endigo9740]

Per the open PR, all known a11y warnings have been resolved with only two exceptions:

1. Modals
2. Drawers

Each have structural flaws to the way the backdrop markup was constructed. This will not be trivial to resolve without a major refactor, which may be out of scope for Skeleton v2. However, please note these issues will not persist in Skeleton v3. So a solution is coming in the future.