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.