CODEWITHSUNDEEP
javascriptcsscss-selectorsfocusaccessibility
Lars Ejaas
Lars Ejaas

Reputation: 181

How to force "keyboard navigation" mode when programmatically setting :focus-visible

I am working on an advanced search feature for a web project in React using the Algolia React Instant search package.

I am struggling a bit with keyboard navigation.

The search result features a long list of articles with various URLs. The list is very cumbersome to navigate only with the tab-key, so I have implemented navigation with the arrow-keys that works really great.

However, I have stumbled upon an issue I am unsure how to solve regarding focus-visible. When navigating with arrow keys a function inside the component will set focus using element.focus();

If I focus the search field with the mouse and start navigating with the arrow keys the focus-visible outline is missing. However, if I navigate to the search field with the tab key and start navigating with the arrow keys the focus-visible outline is visible. This is according to specs, as focus() will not change to focus-visible and the last navigation was done with the mouse.

But this makes it impossible to navigate with the keys - you have no idea what element is in focus. Any idea how to force the browser into thinking that I am navigating with the keyboard when setting focus programmatically?

Upvotes: 1

Views: 1829

Answers (1)

Lars Ejaas
Lars Ejaas

Reputation: 181

I ended up rethinking my styling and using a focus style.

But the behavior in Chrome is really weird.

If I set a style like focus:not(:focus-visible) it will be styled with the focus style when navigating with the mouse on focus, but not if I set focus with Element.focus() (and the focus was initially set on the active element with the mouse); So the Chrome browser knows this was not navigated by a mouse? This makes absolutely no sense to me?

Upvotes: 0

Related Questions