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
3px dotted outline
with
color BL 1,
BLUE.
3px
"dotted underline" with
color BL 1,
BLUE.
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; |