Browser focus
Summary
AUI components ship with these styles, but including these rules will make all elements on the page (non-AUI components) have the same focus ring styles as AUI components.
If the browser supports it, these rules will also make use of :focus-visible to hide the focus rings when they are not needed, e.g: when clicking a button instead of focusing it with the keyboard.
Status
| API status: | general |
|---|---|
| Web resource key: |
com.atlassian.auiplugin:aui-browser-focus
|
| AMD Module key: | N/A |
| General API: | 9.3 |
How to use it
You have two options to use these rules:Include browser focus resources
For P2 usage, include com.atlassian.auiplugin:aui-browser-focus web resource. Then use the `.aui-browser-focus` CSS class on a container.Include CSS styles
If you prefer, you can instead import aui-prototyping-browserfocus.css when using the NPM package. Then use the `.aui-browser-focus` CSS class on a container.The :focus-visible pseudo-class
The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element. This selector is useful to provide a different focus indicator based on the user’s input modality (mouse vs. keyboard).
Check out these examples for more details
Known issues
If you are using AUI and another framework (like Bootstrap or Atlaskit) on the same page, including these styles can cause a double ring or a very thick ring to appear on input fields or buttons. An example of such an issue is: AUI-5325.
In this case, is better not to include these rules and handle the styles mismatch manually instead.