Skip to content

Instantly share code, notes, and snippets.



Last active Aug 29, 2015
What would you like to do?
An experiment in effectively managing focus rings
document.addEventListener("DOMContentLoaded", function () {
document.body.addEventListener("mousedown", function (evt) {
if (! || === 'textbox' ||"disable-point-focus")) {"point-focused", true);
document.body.addEventListener("blur", function (evt) {
}, true);

This comment has been minimized.

Copy link
Owner Author

@bkardell bkardell commented Jul 1, 2015

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=""></script>
:not([point-focused]):focus {
   .... focus ring styles....

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...


This comment has been minimized.

Copy link

@philippeschneide philippeschneide commented Jul 1, 2015

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.