Keeping accessibility focus while removing it for mouse users

Found this little trick , and it is working well. Just sharing if someone wants to use it too.

Credit goes to:
https://medium.com/hackernoon/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

Put a file named “my_custom_scripts.js” in child theme js folder.
See https://kriesi.at/documentation/enfold/add-custom-js-or-php-script/

Contents:

(function($)
{
    "use strict";

// function to see if the user is using tab navigation instead of mouse function 
handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}
window.addEventListener('keydown', handleFirstTab);

// Add more functions here

}(jQuery));

Now you can hide the dotted outline and/or background for everyone except the users that have hit the “I am a keyboard user” key (tab).

CSS example:

/* Accessibility focus with lightblue background and dotted outline */
.user-is-tabbing a:focus,
.user-is-tabbing button:focus,
.user-is-tabbing input:focus,
.user-is-tabbing select:focus,
.user-is-tabbing textarea:focus {
  background-color: lightcyan !important;
  outline: dotted !important;
}

/* hide the lightblue background for everyone except tab navigation users */
body:not(.user-is-tabbing) a:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
/*  background-color: transparent; */ /* optional */
/*  outline: none; */ /* optional */
}

• This topic was modified 4 years, 4 months ago by rob2701. Reason: fixed small typo (missing enter)