Skip to content

Reproducing Svelte accessibility warnings with Shoelace components (a11y-click-events-have-key-events and a11y-no-static-element-interactions)

Notifications You must be signed in to change notification settings

gengns/svelte-shoelace-a11y-issue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Reproducing Svelte accessibility warnings with Shoelace components (a11y-click-events-have-key-events and a11y-no-static-element-interactions)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published