search

CloudCannon / pagefind

Static low-bandwidth search at scale
https://pagefind.app
MIT License
3.24k stars 99 forks source link

Update "Clear" button CSS styles for improved accessibility #537

Open bglw opened 6 months ago

bglw commented 6 months ago

Discussed in https://github.com/CloudCannon/pagefind/discussions/536

Originally posted by **ZachSaucier** December 27, 2023 The way that the "Clear" button currently functions, there's arguably two issues: 1. The click area to the left of the text is very small (2px). 2. When the button is navigated to via keyboard, the border makes the element look awkward: ![Screenshot 2023-12-26 at 6 37 32 PM](https://github.com/CloudCannon/pagefind/assets/3966722/fc1c56ad-ce55-460a-9075-2a169b8d235f) Both of these issues would be fixed by changing the `padding` of `.pagefind-ui__search-clear.svelte-e9gkc3` from `0 calc(15px * var(--pagefind-ui-scale)) 0 calc(2px * var(--pagefind-ui-scale))` to `0 calc(15px * var(--pagefind-ui-scale))`. ![Screenshot 2023-12-26 at 6 38 07 PM](https://github.com/CloudCannon/pagefind/assets/3966722/bd075b05-9bac-4048-893a-e08c7bd43edc) Thanks!