States

Focus

Some people use keyboards or other devices to navigate through a page by jumping from one interactive element to the next. Focus states let users know which element they're currently on and is ready to be interacted with.

A focused state communicates when a user has highlighted an element using a keyboard. Focus states apply to all interactive components.

They should receive high emphasis, as they are not indicated by other visual cues.

Focus styles

Tips och råd

Default focus state

3px dotted outline with color BL 1, BLUE.

Focus state for Breadcrumbs

3px "dotted underline" with color BL 1, BLUE.

A label

Default keyboard focus style for input

2px border with color BL 1, BLUE.

Make focusable elements accessible

If you use Sass, you can include the Sass mixins like so:

.mycomponent {
    &:focus,
    &.is-focused {
        @include IDS_UTIL_PseudoStates_Focus;
    }
}

.mycomponent {
    &:focus:not(:focus-visible) {
        outline: none;
    }
}

.mycomponent {
    &:focus-visible {
        @include IDS_UTIL_PseudoStates_Focus;
    }
}

If you use LESS, you can include the LESS mixins like so:

.mycomponent {
    &:focus,
    &.is-focused {
        .IDS_UTIL_PseudoStates_Focus();
    }
}

.mycomponent {
    &:focus:not(:focus-visible) {
        outline: none;
    }
}

.mycomponent {
    &:focus-visible {
        .IDS_UTIL_PseudoStates_Focus();
    }
}

If you use Stylus, you can include the Stylus mixins like so:


.mycomponent
    &:focus,
    &.is-focused
        IDS_UTIL_PseudoStates_Focus()


.mycomponent
    &:focus:not(:focus-visible)
        outline none


.mycomponent
    &:focus-visible
        IDS_UTIL_PseudoStates_Focus()

Mixins

These are the mixins we use to apply the focus states:

Name	Style
`IDS_UTIL_PseudoStates_Focus`	`outline: 2px dotted $color-states-focus; outline-offset: 2px;`
`IDS_UTIL_PseudoStates_Focus_Input`	`outline: 2px dotted $color-states-focus; border 1px solid $color-states-focus; outline-offset: 0;`
`IDS_UTIL_PseudoStates_Focus_Inset`	`outline: none; outline-offset: 0; box-shadow: inset 0 0 0 2px $color-states-focus;`

Example elements

Edit this section