Accessibility improvements – focus styles

In order to improve our templates accessibility, we will be adding several minor updates in forthcoming releases. These will affect 3rd generation templates for now, but could affect also other templates in the future. First of all, we will be restoring focus styles with help of :focus-visible polyfill library and add following general rule:

*:focus:not(.focus-visible) {
    outline: 0;
}

Secondly, we will employ general focus styles for form controls:

// color will depend on input border color
.form-control:focus, input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 0.1em rgb(205 205 205 / 50%);
}

Please be aware that other small changes to improve accessibility will follow.

Post navigation