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

There are 2 color schemes related to accessible focus styles. The fallback color is only used until What Input? is loaded.

Fallback focus style

4px outline with color BL 1, BLUE.

Fallback focus style

4px box-shadow with color BL 1, BLUE.

Fallback secondary focus state

4px outline with color BL 1, BLUE.

Default secondary focus state

3px outline with color BL 1, BLUE Complement, a direct complement color of BL 1, BLUE.

Fallback tertiary focus state

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

Default tertiary focus state

3px "underline" with color BL 1, BLUE Complement, a direct complement color of BL 1, BLUE.

Default keyboard focus style

3px outline with 1px offset and color BL 1, BLUE Complement, a direct complement color of BL 1, BLUE.

Default keyboard focus style

3px box-shadow with color BL 1, BLUE Complement, a direct complement color of BL 1, BLUE.

Default and fallback 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:

.my-component:focus {
  @include IDS_UTIL_PseudoStates_Focus_Fallback();
}

[data-whatintent='mouse'] {
  .my-component:focus {
    outline: none;
  }
}

[data-whatinput='keyboard'] {
  .my-component:focus {
    @include IDS_UTIL_PseudoStates_Focus();
  }
}

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

.my-component:focus {
  .IDS_UTIL_PseudoStates_Focus_Fallback();
}

[data-whatintent='mouse'] {
  .my-component:focus {
    outline: none;
  }
}

[data-whatinput='keyboard'] {
  .my-component:focus {
    .IDS_UTIL_PseudoStates_Focus();
  }
}

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

.my-component:focus
  IDS_UTIL_PseudoStates_Focus_Fallback()

[data-whatintent='mouse']
  .my-component:focus
    outline: none

[data-whatinput='keyboard']
  .my-component:focus
    IDS_UTIL_PseudoStates_Focus()
What Input?

To be able to give a precise and good enough focus state experience, we use What Input?.

Mixins

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

Name Style
IDS_UTIL_PseudoStates_Focus outline: 3px solid complement($color-accent-blue); outline-offset: 1px;
IDS_UTIL_PseudoStates_Focus_NoOffset outline: 3px solid complement($color-accent-blue); outline-offset: 0;
IDS_UTIL_PseudoStates_Focus_Input outline: 2px solid $color-accent-blue; border 1px solid $color-accent-blue; outline-offset: 0;
IDS_UTIL_PseudoStates_Focus_Radius outline: none; box-shadow: 0 0 0 3px complement($color-accent-blue);
IDS_UTIL_PseudoStates_Focus_Inset outline: none; outline-offset: 0; box-shadow: inset 0 0 0 3px complement($color-accent-blue);
IDS_UTIL_PseudoStates_Focus_Fallback outline: $size-spacing-4 solid $color-accent-blue;
IDS_UTIL_PseudoStates_Focus_Inset_Fallback outline: none; outline-offset: 0; box-shadow: inset 0 0 0 $size-spacing-4 $color-accent-blue;
IDS_UTIL_PseudoStates_Focus_Radius_Fallback outline: none; box-shadow: 0 0 0 $size-spacing-4 $color-accent-blue;

Example elements

Table of Contents

Edit this section, Opens in new window
Contact us, Opens in new window