a11y warnings

[o-az]

When I build my sveltekit project, I get all these a11y warnings:

app> 11:41:33 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Backdrop.svelte:13:0 A11y: <div> with keydown, keyup, keypress, click, mousedown, mouseup handlers must have an ARIA role
app> 11:41:33 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/ButtonGroup.svelte:56:0 A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.
app> 54: </script>
app> 55:
app> 56: <div role="group" class={_class} on:keydown on:keyup on:keypress on:click {...$$restProps}>
app>     ^
app> 57:   <slot />
app> 58: </div>
app> 11:41:33 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Dialog.svelte:61:2 A11y: <div> with click, mouseup, keydown handlers must have an ARIA role
app> 59:   />
app> 60:
app> 61:   <div
app>       ^
app> 62:     class={cls(
app> 63:       'Dialog',
app> 11:41:33 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Drawer.svelte:42:2 A11y: <div> with keydown, mouseup handlers must have an ARIA role
app> 40:   />
app> 41:
app> 42:   <div
app>       ^
app> 43:     class={cls(
app> 44:       'Drawer',
app> 11:41:33 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/ListItem.svelte:20:0 A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.
app> 18:
app> 19: <!-- svelte-ignore a11y-click-events-have-key-events -->
app> 20: <li
app>     ^
app> 21:   class={cls(
app> 22:     'ListItem',
app> 11:41:33 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Menu.svelte:58:2 A11y: Non-interactive element <menu> should not be assigned mouse or keyboard event listeners.
app> 56: >
app> 57:   <!-- svelte-ignore a11y-click-events-have-key-events -->
app> 58:   <menu
app>       ^
app> 59:     class={cls('menu-items outline-none max-h-screen', settingsClasses.menu, classes.menu)}
app> 60:     bind:this={menuItemsEl}
app> 11:41:33 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/MultiSelectField.svelte:92:0 A11y: <div> with click handler must have an ARIA role
app> 90:
app> 91: <!-- svelte-ignore a11y-click-events-have-key-events -->
app> 92: <div
app>     ^
app> 93:   class={cls(disabled && 'pointer-events-none', settingsClasses.root, classes.root, $$props.class)}
app> 94:   on:click={onClick}
app> 11:41:33 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Notification.svelte:30:2 A11y: <div> with click, keypress handlers must have an ARIA role
app> 28:
app> 29: {#if open}
app> 30:   <div
app>       ^
app> 31:     class="Notification rounded-lg border bg-surface-100 shadow-lg z-10"
app> 32:     transition:fly={{ duration: 200, easing: quadIn, x: 100 }}
app> 11:41:34 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/RangeSlider.svelte:179:2 A11y: <div> with mouseenter, mouseleave handlers must have an ARIA role
app> 177:   {...$$restProps}
app> 178: >
app> 179:   <div
app>        ^
app> 180:     on:mouseenter={onMouseEnter('range')}
app> 181:     on:mouseleave={onMouseLeave('range')}
app> 11:41:34 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/RangeSlider.svelte:189:2 A11y: <div> with mouseenter, mouseleave, dblclick handlers must have an ARIA role
app> 187:   />
app> 188:
app> 189:   <div
app>        ^
app> 190:     use:movable={{ axis: 'x', stepPercent }}
app> 191:     on:movestart={onMoveStart('range')}
app> 11:41:34 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/RangeSlider.svelte:210:2 A11y: <div> with mouseenter, mouseleave, dblclick handlers must have an ARIA role
app> 208:   </div>
app> 209:
app> 210:   <div
app>        ^
app> 211:     use:movable={{ axis: 'x', stepPercent }}
app> 212:     on:movestart={onMoveStart('start')}
app> 11:41:34 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/RangeSlider.svelte:229:2 A11y: <div> with mouseenter, mouseleave, dblclick handlers must have an ARIA role
app> 227:   />
app> 228:
app> 229:   <div
app>        ^
app> 230:     use:movable={{ axis: 'x', stepPercent }}
app> 231:     on:movestart={onMoveStart('end')}
app> 11:41:34 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/RangeSlider.svelte:164:0 A11y: <div> with click, keydown handlers must have an ARIA role
app> 162:
app> 163: <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
app> 164: <div
app>      ^
app> 165:   class={cls(
app> 166:     'RangeSlider',
app> 11:41:34 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/SelectField.svelte:37:11 SelectField has unused export property 'tabindex'. If it is for external reference only, please consider using `export const tabindex`
app> 35: export let dense = false;
app> 36: export let clearSearchOnOpen = true;
app> 37: export let tabindex = 0;
app>                ^
app> 38: export let autofocus = void 0;
app> 39: export let fieldActions = autofocus ? (node) => [
app> 11:41:34 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Tilt.svelte:36:0 A11y: <div> with mousemove, mouseleave handlers must have an ARIA role
app> 34: </script>
app> 35:
app> 36: <div
app>     ^
app> 37:   style:--rotateX="{rotateX}deg"
app> 38:   style:--rotateY="{rotateY}deg"
app> 11:41:34 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Tooltip.svelte:83:0 A11y: <div> with mouseenter, mouseleave, click handlers must have an ARIA role
app> 81:
app> 82: <!-- svelte-ignore a11y-click-events-have-key-events -->
app> 83: <div
app>     ^
app> 84:   class={cls('contents', settingsClasses.content, classes.content)}
app> 85:   on:mouseenter={showTooltip}
app> 11:41:34 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/_SelectListOptions.svelte:5:11 SelectListOptions has unused export property 'optionText'. If it is for external reference only, please consider using `export const optionText`
app> 3: import { cls } from "../utils/styles.js";
app> 4: const logger = new Logger("SelectListOptions");
app> 5: export let optionText;
app>               ^
app> 6: export let optionValue;
app> 7: export let selectIndex;
app> 11:41:34 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/_SelectListOptions.svelte:8:11 SelectListOptions has unused export property 'selectOption'. If it is for external reference only, please consider using `export const selectOption`
app>  6: export let optionValue;
app>  7: export let selectIndex;
app>  8: export let selectOption;
app>                ^
app>  9: export let onKeyDown;
app> 10: export let onKeyPress;
app> 11:41:34 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/_SelectListOptions.svelte:14:11 SelectListOptions has unused export property 'value'. If it is for external reference only, please consider using `export const value`
app> 12: export let loading;
app> 13: export let filteredOptions;
app> 14: export let value = void 0;
app>                ^
app> 15: export let selected = void 0;
app> 16: export let highlightIndex;
app> 11:41:34 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/_SelectListOptions.svelte:15:11 SelectListOptions has unused export property 'selected'. If it is for external reference only, please consider using `export const selected`
app> 13: export let filteredOptions;
app> 14: export let value = void 0;
app> 15: export let selected = void 0;
app>                ^
app> 16: export let highlightIndex;
app> 17: export let searchText;
app> 11:41:34 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/_SelectListOptions.svelte:16:11 SelectListOptions has unused export property 'highlightIndex'. If it is for external reference only, please consider using `export const highlightIndex`
app> 14: export let value = void 0;
app> 15: export let selected = void 0;
app> 16: export let highlightIndex;
app>                ^
app> 17: export let searchText;
app> 18: export let classes = {};
app> 11:41:34 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Field.svelte:107:8 A11y: <div> with click handler must have an ARIA role
app> 105:
app> 106:         <!-- svelte-ignore a11y-click-events-have-key-events -->
app> 107:         <div class="flex-grow inline-grid" on:click>
app>              ^
app> 108:           {#if label && ['inset', 'float'].includes(labelPlacement)}
app> 109:             <span
app> 11:41:34 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Grid.svelte:20:0 A11y: <div> with click handler must have an ARIA role
app> 18: </script>
app> 19:
app> 20: <div
app>     ^
app> 21:   class="Grid"
app> 22:   class:grid={!inline}
app> "setIsRestoringContext" is imported from external module "@tanstack/query-core" but never used in "node_modules/@tanstack/svelte-query/dist/useIsFetching.js", "node_modules/@tanstack/svelte-query/dist/useIsMutating.js", "node_modules/@tanstack/svelte-query/dist/useHydrate.js", "node_modules/@tanstack/svelte-query/dist/QueryClientProvider.svelte", "node_modules/@tanstack/svelte-query/dist/createInfiniteQuery.js", "node_modules/@tanstack/svelte-query/dist/createMutation.js", "node_modules/@tanstack/svelte-query/dist/createBaseQuery.js", "node_modules/@tanstack/svelte-query/dist/createQueries.js", "node_modules/@tanstack/svelte-query/dist/createQuery.js" and "node_modules/@tanstack/svelte-query/dist/index.js".
app> ✓ 1528 modules transformed.
app>
app> [vite-plugin-tailwind-purgecss]: Purging unused tailwindcss styles...
app> [vite-plugin-tailwind-purgecss]: Calculating bundle size savings: (not minified)
app> _app/immutable/assets/_layout.CBPF8Ohn.css               51.66 kB  ->  47.25 kB
app> _app/immutable/assets/Shine.XPMZUG7c.css                  2.68 kB  ->   2.59 kB
app> _app/immutable/assets/_page.CYeva45G.css                  4.76 kB  ->   4.76 kB
app> _app/immutable/assets/input.Bk8y7cE5.css                  4.43 kB  ->   4.43 kB
app> vite v5.2.11 building for production...
app> 11:41:38 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Backdrop.svelte:13:0 A11y: <div> with keydown, keyup, keypress, click, mousedown, mouseup handlers must have an ARIA role
app> 11: </script>
app> 12:
app> 13: <div
app>     ^
app> 14:   class={cls(
app> 15:     'Backdrop',
app> 11:41:38 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/ButtonGroup.svelte:56:0 A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.
app> 54: </script>
app> 55:
app> 56: <div role="group" class={_class} on:keydown on:keyup on:keypress on:click {...$$restProps}>
app>     ^
app> 57:   <slot />
app> 58: </div>
app> 11:41:39 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Dialog.svelte:61:2 A11y: <div> with click, mouseup, keydown handlers must have an ARIA role
app> 59:   />
app> 60:
app> 61:   <div
app>       ^
app> 62:     class={cls(
app> 63:       'Dialog',
app> 11:41:39 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Drawer.svelte:42:2 A11y: <div> with keydown, mouseup handlers must have an ARIA role
app> 40:   />
app> 41:
app> 42:   <div
app>       ^
app> 43:     class={cls(
app> 44:       'Drawer',
app> 11:41:39 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/ListItem.svelte:20:0 A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.
app> 18:
app> 19: <!-- svelte-ignore a11y-click-events-have-key-events -->
app> 20: <li
app>     ^
app> 21:   class={cls(
app> 22:     'ListItem',
app> 11:41:39 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Menu.svelte:58:2 A11y: Non-interactive element <menu> should not be assigned mouse or keyboard event listeners.
app> 56: >
app> 57:   <!-- svelte-ignore a11y-click-events-have-key-events -->
app> 58:   <menu
app>       ^
app> 59:     class={cls('menu-items outline-none max-h-screen', settingsClasses.menu, classes.menu)}
app> 60:     bind:this={menuItemsEl}
app> 11:41:39 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/MultiSelectField.svelte:92:0 A11y: <div> with click handler must have an ARIA role
app> 90:
app> 91: <!-- svelte-ignore a11y-click-events-have-key-events -->
app> 92: <div
app>     ^
app> 93:   class={cls(disabled && 'pointer-events-none', settingsClasses.root, classes.root, $$props.class)}
app> 94:   on:click={onClick}
app> 11:41:39 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Notification.svelte:30:2 A11y: <div> with click, keypress handlers must have an ARIA role
app> 28:
app> 29: {#if open}
app> 30:   <div
app>       ^
app> 31:     class="Notification rounded-lg border bg-surface-100 shadow-lg z-10"
app> 32:     transition:fly={{ duration: 200, easing: quadIn, x: 100 }}
app> 11:41:39 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/RangeSlider.svelte:179:2 A11y: <div> with mouseenter, mouseleave handlers must have an ARIA role
app> 177:   {...$$restProps}
app> 178: >
app> 179:   <div
app>        ^
app> 180:     on:mouseenter={onMouseEnter('range')}
app> 181:     on:mouseleave={onMouseLeave('range')}
app> 11:41:39 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/RangeSlider.svelte:189:2 A11y: <div> with mouseenter, mouseleave, dblclick handlers must have an ARIA role
app> 187:   />
app> 188:
app> 189:   <div
app>        ^
app> 190:     use:movable={{ axis: 'x', stepPercent }}
app> 191:     on:movestart={onMoveStart('range')}
app> 11:41:39 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/RangeSlider.svelte:210:2 A11y: <div> with mouseenter, mouseleave, dblclick handlers must have an ARIA role
app> 208:   </div>
app> 209:
app> 210:   <div
app>        ^
app> 211:     use:movable={{ axis: 'x', stepPercent }}
app> 212:     on:movestart={onMoveStart('start')}
app> 11:41:39 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/RangeSlider.svelte:229:2 A11y: <div> with mouseenter, mouseleave, dblclick handlers must have an ARIA role
app> 227:   />
app> 228:
app> 229:   <div
app>        ^
app> 230:     use:movable={{ axis: 'x', stepPercent }}
app> 231:     on:movestart={onMoveStart('end')}
app> 11:41:39 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/RangeSlider.svelte:164:0 A11y: <div> with click, keydown handlers must have an ARIA role
app> 162:
app> 163: <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
app> 164: <div
app>      ^
app> 165:   class={cls(
app> 166:     'RangeSlider',
app> 11:41:39 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/SelectField.svelte:37:11 SelectField has unused export property 'tabindex'. If it is for external reference only, please consider using `export const tabindex`
app> 35: export let dense = false;
app> 36: export let clearSearchOnOpen = true;
app> 37: export let tabindex = 0;
app>                ^
app> 38: export let autofocus = void 0;
app> 39: export let fieldActions = autofocus ? (node) => [
app> 11:41:40 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Tilt.svelte:36:0 A11y: <div> with mousemove, mouseleave handlers must have an ARIA role
app> 34: </script>
app> 35:
app> 36: <div
app>     ^
app> 37:   style:--rotateX="{rotateX}deg"
app> 38:   style:--rotateY="{rotateY}deg"
app> 11:41:40 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Tooltip.svelte:83:0 A11y: <div> with mouseenter, mouseleave, click handlers must have an ARIA role
app> 81:
app> 82: <!-- svelte-ignore a11y-click-events-have-key-events -->
app> 83: <div
app>     ^
app> 84:   class={cls('contents', settingsClasses.content, classes.content)}
app> 85:   on:mouseenter={showTooltip}
app> 11:41:40 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Grid.svelte:20:0 A11y: <div> with click handler must have an ARIA role
app> 18: </script>
app> 19:
app> 20: <div
app>     ^
app> 21:   class="Grid"
app> 22:   class:grid={!inline}
app> 11:41:40 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/Field.svelte:107:8 A11y: <div> with click handler must have an ARIA role
app> 105:
app> 106:         <!-- svelte-ignore a11y-click-events-have-key-events -->
app> 107:         <div class="flex-grow inline-grid" on:click>
app>              ^
app> 108:           {#if label && ['inset', 'float'].includes(labelPlacement)}
app> 109:             <span
app> 11:41:40 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/_SelectListOptions.svelte:5:11 SelectListOptions has unused export property 'optionText'. If it is for external reference only, please consider using `export const optionText`
app> 3: import { cls } from "../utils/styles.js";
app> 4: const logger = new Logger("SelectListOptions");
app> 5: export let optionText;
app>               ^
app> 6: export let optionValue;
app> 7: export let selectIndex;
app> 11:41:40 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/_SelectListOptions.svelte:8:11 SelectListOptions has unused export property 'selectOption'. If it is for external reference only, please consider using `export const selectOption`
app>  6: export let optionValue;
app>  7: export let selectIndex;
app>  8: export let selectOption;
app>                ^
app>  9: export let onKeyDown;
app> 10: export let onKeyPress;
app> 11:41:40 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/_SelectListOptions.svelte:14:11 SelectListOptions has unused export property 'value'. If it is for external reference only, please consider using `export const value`
app> 12: export let loading;
app> 13: export let filteredOptions;
app> 14: export let value = void 0;
app>                ^
app> 15: export let selected = void 0;
app> 16: export let highlightIndex;
app> 11:41:40 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/_SelectListOptions.svelte:15:11 SelectListOptions has unused export property 'selected'. If it is for external reference only, please consider using `export const selected`
app> 13: export let filteredOptions;
app> 14: export let value = void 0;
app> 15: export let selected = void 0;
app>                ^
app> 16: export let highlightIndex;
app> 17: export let searchText;
app> 11:41:40 PM [vite-plugin-svelte] /build/app/node_modules/svelte-ux/dist/components/_SelectListOptions.svelte:16:11 SelectListOptions has unused export property 'highlightIndex'. If it is for external reference only, please consider using `export const highlightIndex`
app> 14: export let value = void 0;
app> 15: export let selected = void 0;
app> 16: export let highlightIndex;
app>                ^
app> 17: export let searchText;
app> 18: export let classes = {};

I think most of them can be solved by following the log msg. I'm happy to make a PR. Are you open to that?

[techniq]

Hey @o-az, handling these a11y / Typescript warnings has been on my TODO for some time (see: #186), and I would very much appreciate a PR (and probably multiple to make them easier to review). Thanks!