Closed
Description
Describe the problem
After the recent update touching a11y, dynamic elements (<svelte:element />) often end up coated with warnings that are not valid based on the possible element outcome, breaking the expected consistency from a DX point of view.
Take this simple example:
<script lang="ts">
export let href: string = undefined;
export let tabindex: number = undefined;
</script>
<!-- These work as expected -->
<button on:click {tabindex}></button>
<a {href} on:click {tabindex}>Content</a>
<!-- This one doesn't:
A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.svelte(a11y-click-events-have-key-events)
A11y: not interactive element cannot have positive tabIndex valuesvelte(a11y-no-noninteractive-tabindex)
-->
<svelte:element this={href ? 'a' : 'button'} {href} on:click {tabindex}>Content</svelte:element>Describe the proposed solution
Somehow parse the contents of svelte:element's this={}?
Alternatives considered
Quick fix for those who want: mute the concerned warnings.
Importance
nice to have
Metadata
Metadata
Assignees
Labels
No labels