[Tabs] `:focus-visible` active in Safari 15.4 after clicking tab with mouse
jhogervorst opened this issue · 1 comments
🐛 Bug report
Current Behavior
After clicking a tab using the mouse, :focus-visible styling is active on the clicked tab in Safari 15.4:
Expected behavior
When using the mouse to navigate/click elements, :focus-visible should not be active. This behaviour is seen for example in Chrome:
Reproducible example
Suggested solution(s)
The issue seems caused by this manual focus() call:
reach-ui/packages/tabs/src/index.tsx
Line 482 in d0fd3fb
When removing this line, the issue no longer occurs.
As confirmed by the person responsible for the implementation of :focus-visible in Safari, focusing elements using scripts causes the :focus-visible style to become active.
So I think this focus() call should only be applied when keyboard navigation was used, and not when the mouse was used, to prevent this unexpected :focus-visible style.
Additional context
Safari 15.4 includes support for the :focus-visible pseudo-class. The default/expected behaviour is that :focus-visible is active when using the keyboard to navigate a page, and not when using mouse to click elements.
Your environment
| Software | Name(s) | Version |
|---|---|---|
| Reach Package | Tabs | Latest |
| React | 16.12.0 | |
| Browser | Safari | 15.4 (17613.1.17.1.6) |
| Assistive tech | ||
| Node | ||
| npm/yarn | ||
| Operating System | macOS Monterey | 12.3 (21E230) |
the similar issue is reproduced for the AccordionButton from the @reach/accordion package and for the DisclosureButton from the @reach/disclosure one