Currently, Codex Links apply a focused state (blue border) on click, which is consistent with the behavior of other focusable components like Buttons and Inputs. When Vector 2022 switched to using the Codex Link mixin and links in Wikipedia article pages received the new styling, the intentionality and desirability of this behavior was called into question (T368137).
We should explore using the CSS pseudo-class :focus-visible, which allows the user agent to decide when the focus state should be applied.
[...] 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.
Technical notes
In order to not loose focus outline for browsers without :focus-visible support, we should rely on a support query.
See also https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
Acceptance Criteria
- Provide a prototype of the Codex Link using :focus-visible.
- DST designers test the change and determine if the new behavior is desirable.
- If yes, deploy the fix.