Describe the bug

Description

The Svelte compiler generates accessibility warnings (a11y-click-events-have-key-events and a11y-no-static-element-interactions) when using the <sl-button> component (and other Shoelace components) from the Shoelace library. These warnings are false positives because <sl-button> is a custom element that extends the native <button> functionality and already includes proper keyboard event handling and interactive semantics internally.

Warnings Observed

1. a11y-click-events-have-key-events:
   "Clicking elements with a click event handler should also have a keydown or keypress event handler."

2. a11y-no-static-element-interactions:
   "Static HTML elements with event handlers require a role."

Expected Behavior

The Svelte compiler should recognize that Shoelace <sl-button> (and other Shoelace components extending native HTML buttons) already handle keyboard events and have appropriate roles or semantics. These warnings should not be triggered.

Actual Behavior

Warnings are displayed for Shoelace <sl-button> components, even though they are accessible by default.

Proposed Solution

The vite-plugin-svelte or Svelte accessibility rules should:

1. Detect custom elements like <sl-button> that extend the native <button> element and suppress these warnings automatically.
2. Alternatively, provide a way to configure the accessibility rules to whitelist certain custom elements (e.g., Shoelace components).

Workaround

Currently, the only way to suppress these warnings is by using svelte-ignore directives:

<!-- Suppress both warnings -->
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
<sl-button on:click={handleClick}>Click Me</sl-button>

However, this adds unnecessary boilerplate and clutter to the code for components that are already accessible.

Additional Context

Shoelace components like <sl-button> are designed to follow accessibility best practices out of the box. According to the Shoelace documentation:

• <sl-button> extends the native <button> element.
• Keyboard interactions and appropriate roles are implemented internally.

References

• Shoelace Button Documentation: https://shoelace.style/components/button
• Svelte Accessibility Warning: https://svelte.dev/docs/svelte/compiler-warnings#a11y_click_events_have_key_events
• Svelte Accessibility Warning: https://svelte.dev/docs/svelte/compiler-warnings#a11y_no_static_element_interactions

Reproduction URL

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

Reproduction

Steps to Reproduce

1. Install Shoelace in a Svelte project with Vite using vite-plugin-svelte.
2. Add a Shoelace <sl-button> component to a Svelte file with a click event:

   <script>
     function handleClick() {
       console.log('Button clicked');
     }
   </script>
   
   <sl-button on:click={handleClick}>Click Me</sl-button>

3. Run the development server (e.g., vite dev or bun dev).
4. Observe the following warnings in the console or terminal:
   • a11y-click-events-have-key-events
   • a11y-no-static-element-interactions

Logs

❯ bun dev
$ vite --host
Forced re-optimization of dependencies
Port 5173 is in use, trying another one...

  VITE v6.0.11  ready in 503 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: http://192.168.1.73:5174/
  ➜  press h + enter to show help
1:48:57 pm [vite-plugin-svelte] src/App.svelte:3:0 Visible, non-interactive elements with a 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
https://svelte.dev/e/a11y_click_events_have_key_events
1:48:57 pm [vite-plugin-svelte] src/App.svelte:3:0 `<sl-button>` with a click handler must have an ARIA role
https://svelte.dev/e/a11y_no_static_element_interactions

System Info

• vite-plugin-svelte version: 5.0.3
• Svelte version: 5.19.0
• Vite version: 6.0.11
• Shoelace version: 2.19.1
• Bun version: 1.1.36
• Operating System: Ubuntu 24.04.1