on-interact Sass mixin

on-interact.scss

// use this where you'd otherwise use '&:hover'
// to get accessible styling for keyboard navigation too

@mixin on-interact {
    &:active,
    &:focus,
    &:hover {
        @content;
    }
}

// usage:

.some-element {
    background-color: red;
    
    @include on-interact {
        background-color: blue;
    }
    
}