Add generic forwarding of events and fix focus outlines
<!--
Thanks for creating this pull request 🤗
Please make sure that the pull request is limited to one type (docs, feature, etc.) and keep it as small as possible. You can open multiple prs instead of opening a huge one.
-->
<!-- If this pull request closes an issue, please mention the issue number below -->
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`](https://github.com/baseballyama/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](https://github.com/sveltejs/svelte/issues/2837#issuecomment-1848225140) so this would only be a temporary solution until it's released.
## ✅ Checks
- [x] My pull request adheres to the code style of this project
- [x] My code requires changes to the documentation
- [x] I have updated the documentation as required
- [x] 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.
<details>
<summary>Also, here's the shell script I used to update the files:</summary>
```bash
#!/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
```
</details>
Thank you!
合并状态:未合并 关闭于 2024-03-11 2 条评论