focus-visible
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#focus_vs_focus-visible
The :focus-visible pseudo-class also matches the focused element, but only if the user needs to be informed where the focus currently is.
Originally, user-agent CSS set focus styles based only on the :focus pseudo-class, styling most focused elements with a focus ring outline. This meant all elements, including all links and buttons, had a focus ring applied when focused, which many found ugly. Because of the appearance, some authors removed the user-agent outline focus styles. Changing focus style can decrease usability, while removing focus styles makes keyboard navigation inaccessible for sighted users.
Browsers no longer visibly indicate focus (such as by drawing a "focus ring"), around each element when it has focus. Instead, they use a variety of heuristics to provide focus indicators only when it would be most helpful to the user. For instance, when a button is clicked using a pointing device, the focus is generally not visually indicated, but when a text box needing user input has focus, focus is indicated. While focus styles are always required when users are navigating the page with the keyboard or when focus is managed via scripts, focus styles are not required when the user knows where they are putting focus, such as when they use a pointing device such as a mouse or finger to physically set focus on an element, unless that element continues to need user attention.
The :focus pseudo-class always matches the currently-focused element. The :focus-visible pseudo-class also matches the focused element, but only if the user needs to be informed where the focus currently is. Because the :focus-visible pseudo-class matches the focused element when needed, using the :focus-visible (instead of the :focus pseudo-class) allows authors to change the appearance of the focus indicator without changing when the focus indicator appears.
When the :focus pseudo-class is used, it always targets the currently focused element. This means that when a user employs a pointing device, a visible focus ring appears around the focused element, which some consider obtrusive. The :focus-visible pseudo-class respects user agents' selective focus indication behavior while still allowing focus indicator customization.