Svelte Shoelace A11y Issue

This repository reproduces false-positive Svelte accessibility warnings (a11y-click-events-have-key-events and a11y-no-static-element-interactions) when using Shoelace components like <sl-button>.

Steps to Reproduce

1. Clone the repository:

   git clone https://github.com/gengns/svelte-shoelace-a11y-issue.git
   cd svelte-shoelace-a11y-issue
   

2. Install dependencies:

   bun install
   

3. Run the development server:

   bun dev
   

4. Check the console or terminal for the following warnings:

   • a11y-click-events-have-key-events
   • a11y-no-static-element-interactions

Example Code

<sl-button on:click={() => alert('Clicked!')}>Click Me</sl-button>

Expected Behavior

No accessibility warnings should be triggered for <sl-button> as it extends the native <button> element and is fully accessible by default.

Actual Behavior

False-positive accessibility warnings are triggered by the Svelte compiler.

Environment

• Svelte
• Vite
• Shoelace