@atlassian/aui/src/less/imports/mixins/focus.less

Atlassian User Interface library

@import (reference) '../aui-theme/core/colors';
@import (reference) './shadows';

@aui-focus-ring-color: var(--aui-focus);

#aui {
    .with-focus-ring(@width: 2px; @inset: false; @set-border-color: false) {
        outline-style: none;

        #aui.with-box-shadow(@aui-focus-ring-color, @width, @inset);

        & when (@set-border-color = true) {
            border-color: @aui-focus-ring-color;
        }
    }

    // Add a focus style to the element
    .focus(@rules) {
        &:focus {
            @rules();
        }
    }

    // Adds a focus style to the element, but only when they are activated by keyboard, not mouse.
    // Will always render a focus style if `aui-no-focusvisible` is added to the html tag.
    .focus-visible(@rules) {
        .hide-outline() {
            outline-style: none;
            outline-offset: unset;
        }

        html.aui-no-focusvisible &:focus {
            @rules();
        }

        // Remove default focus styles for mouse users ONLY if
        // :focus-visible (or its polyfill) is supported on this platform.
        // The selectors are discrete because CSS ignores an entire ruleset if one selector is invalid.
        html:not(.aui-no-focusvisible).js-focus-visible &:focus:not(.focus-visible) {
            .hide-outline();
        }
        html:not(.aui-no-focusvisible) &:focus:not(:focus-visible) {
            .hide-outline();
        }

        // Affect the potential CSS standard pseudo-selector
        // Its mozilla-specific implementation, and
        // a CSS class added by the WICG polyfill.
        // The selectors are discrete because CSS ignores an entire ruleset if one selector is invalid.
        html:not(.aui-no-focusvisible).js-focus-visible &.focus-visible {
            @rules();
        }
        html:not(.aui-no-focusvisible) &:focus-visible {
            @rules();
        }
    }
}