Tag: Accessibility

Remove focus outline and add it on tab key

HTML

<body class="no-focus-outline">
<!-- WordPress -->
<body <?php body_class("no-focus-outline"); ?>>

SCSS

.no-focus-outline {
  a, button, input {
    &:focus {
      outline: none;
      box-shadow: none !important;
    }
}

JS

// body remove no-focus-outline on tab key
document.body.addEventListener('keydown', function(e) {
    if (e.which === 9) /* tab */ {
        $("body").removeClass('no-focus-outline');
    }
});