tl;dr better looking, intentionally designed focus states for accessible websites
If you are using npm, you can npm i focustype
Otherwise, you can use jsDelivr to reference the latest version from their CDN.
<script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/focustype.js"></script>This is focustype. It provides useful data attributes to isolate focus events based on their origins. Check out the GitHub repository for code.
Every browser seems to focus elements under different circumstances. Don't believe me?
Go click these bootstrap buttons
in different browsers and you'll see how the focus state shows in some browsers
but not others. This is becuase the visual focus state uses the :focus
selector, but different browsers focus the element differently on clicking,
or tabbing through. This small javascript solution gives you insights into
how an element received focus, so you can make the behavior look the same
between all browsers under the exact scenerios you wish.
Focus states are an important part of letting users know what part of your web page currently has focus. This is the case for almost all users of the web (even if you don't relize it), and even more so for those who navigate the web entirely by keyboard, jumping from element to element. You likely care about how your websites elements look for all users, and focustype helps you dial in your design under all circumstances. For mouse users, and keyboard users.
Below are some links you can tab through.
If you are having trouble tabbing through a page on Firefox on Mac, you may need to enable it. This is how I did it.
And, for reference, when an item has a styled focus state it will look like this.
:focus Problem
You'll notice on Chrome, for example, that if I apply a style to :focus the elements
will get this styling event on click. This is likely not your intention.
This is a link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link.
This is a focusable p.
Nested content in a focusable element.
Using focustype our selector can change to [data-focustype="key"]:focus.
You'll now notice in all browsers the focus styling is only applied on key focus.
(from tabbing through the page).
This is a link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link.
This is a focusable p.
Nested content in a focusable element.
You can also do this with mouse only focus. Its important to note though that
this selector does not contain the :focus state, so its just
[data-focustype="mouse"]. This is because some browsers, while
putting focus on the element you click, don't actually put "focus" on the element.
So, if we include the :focus state on this selector it wouldn't
show up in these browsers.
This is a link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link.
This is a focusable p.
Nested content in a focusable element.
Focus can also be applied programically. In this case, the last example
link has focus brought to it on hover. This gives the type unknown.
This is a link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link. And here is another link.
This is a focusable p.
Nested content in a focusable element.
:focus-visible
Kinda. However, the current support for this is not great (see support here),
and you don't get the additional insight about specific focus origins. Once/if :focus-visible has better support I can see
use cases where focustype is overkill.
If you are using scss you may find the following mixins helpful.
@mixin key-only-focus {
&[data-focustype="key"]:focus {
@content;
}
}
@mixin mouse-only-focus {
&[data-focustype="mouse"] {
@content;
}
}
@mixin unknown-only-focus {
&[data-focustype="unknown"]:focus {
@content;
}
}
Styles should be written such that the usability isn't dependent on javascript.
focustype adds a class to the body focustype-activated
when it is loaded. You can use this to your advantage.
I'd personally avoid using key only or mouse only focus styling on certain form inputs. In my opion many users will start to fill out a form by clicking in, then tabbing through parts, then clicking again. It could be confusing to the user if elements have different looks.
I've tested this in Chrome, Safari, Firefox on a Mac..... so if you are hoping for a solid solution make sure you test this stuff further. There are no guarantees of this working in all sceneries. LMK if you find issues.