An experiment in effectively managing focus rings

click-focus.js

document.addEventListener("DOMContentLoaded", function () {
    document.body.addEventListener("mousedown", function (evt) {
        if (!evt.target.setSelectionRange || evt.target.role === 'textbox' || evt.target.hasAttribute("disable-point-focus")) {
    	    evt.target.setAttribute("point-focused", true); 
        }
    });
    document.body.addEventListener("blur", function (evt) {
       evt.srcElement.removeAttribute("point-focused");
    }, true);
});

Based on a conversation with Alice Boxhall and Marcy Sutton, this snippet attaches/manages metadata in the form of an attribute to an element whose focus has been set via a pointing device rather than the keyboard unless:
* It has setSelectionRange method, because things you can type are different
* It has an aria role of textbox, so artificial elements that get the aria right should still work
* is has an attribute 'disable-point-focus' so that it is simple to create an opt-out for custom elements/constructs

Should enable simple focus rules that meet the spirit of a11y guidelines for keyboard users but don't get in the way for pointer users.

<script src="https://rawgit.com/bkardell/d444e006bd6cfbc99986/raw/296b29a4099d37031613d9d7c72b588df5ddd065/click-focus.js"></script>
<style>
:not([point-focused]):focus {
   .... focus ring styles....
}
</style>

Note, I have some philosophical problems with this (as a mixed user myself, I always like to see the focus ring in order to help my understanding of my context in the document) but I appear to be in the minority and improving the status quo (which is bad) requires someone to suggest change - so here it is...

Showing more of the focus rings for those who need them (keyboard users) is the right thing. I like that the mouse user is seeing less of them.