When navigating with a keyboard, using space to select a button I lose the browser's native focus indicator

Question

Our app has buttons that zoom in, zoom out and reset zoom on a map. My problem is that the buttons do not retain the focus indicator after they have been activated by the space-bar. They do however retain the focus indicator if they are selected with the enter key. They work just fine with the space bar, and a user can repeatedly zoom-in/out. I can also console.log document.activeElement and confirm that the respective button is still active.

The button is in a React v18.1.0 functional component and the map is mapBox-gl v1.0.0.

<Button
  tabIndex={isModalOpen || isShareOpen ? '-1' : '0'}
  onClick={ () => map.zoomIn({ duration: 1000 })}
  aria-label="Increase Map Zoom"
  theme={theme}
>
  <ZoomInIcon color={controlsColor} />
</Button>

I have tried a variety of solutions regarding finding the element and manually focusing it with .focus(). I have tried adjusting for keydown vs. keyup events, event.code === 'Enter', event.code === 'Space' and nothing retains focus.

Answer 1

Answering with my solution in case it helps others. I added the following CSS on the elements that are in tab-index and need to retain focus after an interaction (so not a button that opens a modal for example).

:focus {
  outline: none;
  border: 2px solid blue;
  border-radius: 3px;
}

In choosing this approach you will also need to identify whether a user is a keyboard or mouse user and conditionally render the css. This is so that clicking an element does not highlight it in blue.