layerchart icon indicating copy to clipboard operation
layerchart copied to clipboard

A11y errors when using with vite-plugin-svelte

Open xmlking opened this issue 1 year ago • 1 comments
trafficstars

I am getting bunch of A11y errors for both layerchart and svelte-ux components when I start my server

A11y: <path> with click, mousemove, mouseleave handlers must have an ARIA role

console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/Arc.svelte:157:0 A11y: <path> with click, mousemove, mouseleave handlers must have an ARIA role
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/Area.svelte:46:0 A11y: <path> with click, mousemove, mouseleave handlers must have an ARIA role
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/Circle.svelte:21:0 A11y: <circle> with click, mousemove, mouseleave handlers must have an ARIA role
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/ClipPath.svelte:19:2 A11y: <g> with click, mousemove, mouseleave, keydown handlers must have an ARIA role
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/Frame.svelte:7:0 A11y: <rect> with click handler must have an ARIA role
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/GeoPath.svelte:46:4 A11y: <path> with mousemove, mouseleave, click handlers must have an ARIA role
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/Group.svelte:35:0 A11y: <g> with click, mousemove, mouseleave handlers must have an ARIA role
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/Labels.svelte:14:11 Labels has unused export property 'significantDigits'. If it is for external reference only, please consider using `export const significantDigits`
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/Spline.svelte:81:2 A11y: <path> with click, mousemove, mouseleave handlers must have an ARIA role
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/Line.svelte:25:0 A11y: <line> with click, mousemove, mouseleave handlers must have an ARIA role
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/Link.svelte:29:0 A11y: <path> with click, mouseover, mousemove, mouseout, mouseleave handlers must have an ARIA role
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/Rect.svelte:26:0 A11y: <rect> with click, mouseover, mousemove, mouseout, mouseleave handlers must have an ARIA role
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/TooltipContext.svelte:289:4 A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type="button"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/TooltipContext.svelte:289:4 A11y: <div> with mousemove, mouseleave, click handlers must have an ARIA role
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/TooltipContext.svelte:307:8 A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type="button"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/TooltipContext.svelte:307:8 A11y: <path> with mousemove, mouseleave, click handlers must have an ARIA role
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/TooltipContext.svelte:325:8 A11y: visible, non-interactive elements with an on:click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as <button type="button"> or <a> might be more appropriate. See https://svelte.dev/docs/accessibility-warnings#a11y-click-events-have-key-events for more details.
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/TooltipContext.svelte:325:8 A11y: <rect> with mousemove, mouseleave, click handlers must have an ARIA role
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons_nmsgwmcgbtwlqvyxrinqpmq6wu/node_modules/layerchart/dist/components/Zoom.svelte:165:0 A11y: <g> with mousedown, dblclick, click, click, keydown, keyup, keypress handlers must have an ARIA role
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/Backdrop.svelte:11:0 A11y: <div> with keydown, keyup, keypress, click, mousedown, mouseup handlers must have an ARIA role
console:dev: 10:23:32 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/ButtonGroup.svelte:34:0 A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/Dialog.svelte:72:2 A11y: <div> with click, mouseup, keydown handlers must have an ARIA role
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/Drawer.svelte:40:2 A11y: <div> with keydown, mouseup handlers must have an ARIA role
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/Field.svelte:108:8 A11y: <div> with click handler must have an ARIA role
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/Grid.svelte:45:0 A11y: <div> with click handler must have an ARIA role
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/ListItem.svelte:38:0 A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/Menu.svelte:62:2 A11y: Non-interactive element <menu> should not be assigned mouse or keyboard event listeners.
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/MultiSelectField.svelte:98:0 A11y: <div> with click handler must have an ARIA role
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/Notification.svelte:38:2 A11y: <div> with click, keypress handlers must have an ARIA role
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/RangeSlider.svelte:213:2 A11y: <div> with mouseenter, mouseleave handlers must have an ARIA role
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/RangeSlider.svelte:223:2 A11y: <div> with mouseenter, mouseleave, dblclick handlers must have an ARIA role
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/RangeSlider.svelte:244:2 A11y: <div> with mouseenter, mouseleave, dblclick handlers must have an ARIA role
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/RangeSlider.svelte:263:2 A11y: <div> with mouseenter, mouseleave, dblclick handlers must have an ARIA role
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/RangeSlider.svelte:198:0 A11y: <div> with click, keydown handlers must have an ARIA role
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/SelectList.svelte:301:4 A11y: <div> with click handler must have an ARIA role
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/SelectList.svelte:254:0 A11y: <div> with click handler must have an ARIA role
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/Tilt.svelte:31:0 A11y: <div> with mousemove, mouseleave handlers must have an ARIA role
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/ToggleOption.svelte:25:0 A11y: Non-interactive element <label> should not be assigned mouse or keyboard event listeners.
console:dev: 10:23:33 AM [vite-plugin-svelte] /Users/xyz/spectacular/node_modules/.pnpm/[email protected]_@[email protected]_@fortawesome+free-solid-svg-icons@_p5fa3eoyerafstjbcxfmersxsq/node_modules/svelte-ux/dist/components/Tooltip.svelte:92:0 A11y: <div> with mouseenter, mouseleave, click handlers must have an ARIA role

xmlking avatar Jan 06 '24 18:01 xmlking

Thanks @xmlking. We will be prioritizing all of these very soon. Tracking in https://github.com/techniq/svelte-ux/issues/186

techniq avatar Jan 06 '24 20:01 techniq

@xmlking Sorry for the delay, but LayerChart 0.43.0 and Svelte UX 0.71.0 now provide a much improved Typescript and A11y experience, and a clean console on startup :). Typescript and A11y improvements will continue, especially during the Svelte 5 migration. Have a great day!

techniq avatar Jun 27 '24 13:06 techniq