Add generic forwarding of events and fix focus outlines

[dslatkin]

Closes #1

📑 Description

This PR adds general event delegation to the icons. Right now the library only forwards explicit events with on:click, on:keydown, etc. event forwarders.

svelte-preprocess-delegate-events supports the general forwarding of events with a new on:* directive. This PR adds that dependency according to its README instructions and converts the current forwarders to a generic forwarder that the proprocessor uses. Using this library also means Svelte won't set up inert event listeners by default, fixing the focus issue identified in #1.

Svelte 5 should fix this so this would only be a temporary solution until it's released.

✅ Checks

• My pull request adheres to the code style of this project
• My code requires changes to the documentation
• I have updated the documentation as required
• All the tests have passed

ℹ Additional Information

This all seems to work in my testing. I've npm run build && npm run preview and tried adding click, focus, and blur listeners to the icons using in the /icons route and they still work even after converting everything to use the preprocessor with the on:* directive.

There might be a better way to test installing the package as a dep. If you want I could do that and/or add some integration tests.

Also, here's the shell script I used to update the files:

#!/bin/bash

remove_lines=(
    on:click
    on:keydown
    on:keyup
    on:focus
    on:blur
    on:mouseenter
    on:mouseleave
    on:mouseover
    on:mouseout
)

for f in ./*.svelte;
do
    for line in "${remove_lines[@]}"; do
        sed -i "/$line/d" "$f"
    done
    sed -i '/  aria-label={ariaLabel}/a \  on:*' "$f"
done

Thank you!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
svelte-radix	❌ Failed (Inspect)			Mar 11, 2024 5:27am

[shinokada]

d1bab2f solved this problem.