Providing more clear visual indicator for keyboard navigation

For users who rely on a keyboard for navigation (typically using the tab key), it's nice to have a more clear visual indicator of the element that currently has keyboard focus.

### Describe the problem that you'd like solved

This is an ok example. I think it's clear that the focus is on "open library" because of the blue-colored outline.

Here are some examples that keyboard users might get confused for navigation.
- The focus is on "All," but the outline color is grey and hard to see.

- The focus is on the search bar, but there is no outline, and it's hard to see.

- The focus is on the right arrow button, but the button is light blue so that the darker-blue focus is hard to see.

- The focus is on the left arrow button, but there is no indicator that the focus is on this element. It is because, in this case, the button is disabled since there is no item further on the left.

### Proposal & Constraints

Adding a more clear visual indicator for keyboard focus. It could be a consistent outline appearance (e.g., missing colored outline in the search bar), avoiding the use of the same color for the element and outline (e.g., blue color button on blue color outline), or even adding background color for the focused element as example below.

[WebAIM webpage](https://webaim.org/techniques/keyboard/) is a good example.

### Additional context

### Stakeholders