Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resolve a11y warnings in multiple components #2632

Closed
endigo9740 opened this issue Apr 25, 2024 · 3 comments · Fixed by #2643
Closed

Resolve a11y warnings in multiple components #2632

endigo9740 opened this issue Apr 25, 2024 · 3 comments · Fixed by #2643
Assignees
Labels
bug Something isn't working
Milestone

Comments

@endigo9740
Copy link
Contributor

endigo9740 commented Apr 25, 2024

Current Behavior

Screenshot 2024-04-25 at 11 22 38 AM

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:

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
@endigo9740 endigo9740 added the bug Something isn't working label Apr 25, 2024
@endigo9740 endigo9740 added this to the v2.0 milestone Apr 25, 2024
@endigo9740 endigo9740 self-assigned this Apr 25, 2024
@salisshuaibu11

This comment was marked as resolved.

@endigo9740
Copy link
Contributor Author

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

Screenshot 2024-04-29 at 2 14 39 PM

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 endigo9740 linked a pull request Apr 30, 2024 that will close this issue
7 tasks
@endigo9740
Copy link
Contributor Author

endigo9740 commented May 1, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants