ITADN

Add generic forwarding of events and fix focus outlines

#2Pull Requestdslatkin 创建于 2024-03-11
D
dslatkincommented
<!-- 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 条评论