listbox-button: Focus ring inside list is clipped - Githubissues

eBay / skin

Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.

https://ebay.github.io/skin/

MIT License

178 stars 67 forks source link

listbox-button: Focus ring inside list is clipped #2298

Closed patricknelson closed 7 months ago

patricknelson commented 7 months ago

I verified there's no existing issue for this bug.

[X] There are no existing issues

Current behavior

See https://opensource.ebay.com/skin/#listbox-button. When using the keyboard, the focus ring on the list is apparently getting clipped around all four edges.

p.s. To see the bottom edges, you can adjust the code background (how I got screenshot below).

Expected behavior

Focus ring is clean/consistent.

Skin version

v17.2.0

Device/OS/Browser info

PC Windows 10 Chrome 122.0.6261.131

Steps to reproduce

1. Tab to a listbox-button
2. Press enter to cause list to appear (so that `:focus-visible` pseudo-class is triggered

Relevant code block

No response

Additional context

No response

patricknelson commented 7 months ago

p.s. Seems like border-radius: var(--border-radius-50) on listbox-button__options would patch this right up. 😄