:focus-visible for Interactive Block Elements

For interactive elements, it’s important to make sure that they are visible when focused for accessibility. However, the default outline styles on modern browsers is insufficient and frankly doesn’t look good.

To fix this, developers have implemented custom :focus-visible styles. Generally, the implementation is an offset ring when focused.

However, this doesn’t work for all instances. For example, when you have color blocked sections, the ring displays an inconsistent color with the background.

In this case, we can try inset outlines!

To achieve this, we create a pseudo element that inherits the outline style from the parent element. color-mix() enhances it by providing a tinted outline instead of using the default text color. It’s more resilient to different button variations.

@supports selector(:focus-visible) {
  .focus-visible {
    outline: none;
    position: relative;

    &::after {
      border: 0.125em solid transparent;
      border-radius: 0.25em;
      content: '';
      inset: 0.5em;
      pointer-events: none;
      position: absolute;
    }

    &:focus-visible {
      &::after {
        border-color: currentColor;
        border-color: color-mix(in srgb, currentColor 75%, transparent);
      }
    }
  }
}

This also works decently well with images but needs a wrapper element for it to work.