A rather geeky/technical weblog, est. 2001, by Bramus
Very rad demo by Adam Argyle, which gives you a Spotlight / Focus effect upon pressing the Option/Alt key. Also works on Mobile. (Focus the CodePen embed first) See the Pen Radial focus effect with mask-image by Adam Argyle (@argyleink) on CodePen. It basically is a fixed grey overlay with a mask-image on top that …
Nice little demo by Adam Argyle in which he makes the focus ring pop by changing its outline-offset (with a transition) on focus. The code also correctly respects the user’s prefers-reduced-motion preference.
A clear, beautiful and easy to implement focus-state solution that improves accessibility and usability. This reminds me of the app-wide Focus Ring the folks over at Discord implemented, but with an animated ring that moves across the screen. Floating Focus → Via CSS-Tricks
:focus-visible Is Here
With Chromium 86 and now recently Firefox 85 supporting :focus-visible, it’s a good time to refer to this post by Matthias Ott: The :focus-visible pseudo-class lets you show focus styles only when they are needed, using the same heuristic that the browser uses to decide whether to show the default focus indicator. You use :focus-visible …
:not(:focus):not(:placeholder-shown):invalid, not :invalid
The built-in browser form validation mechanism can be frustrating as it will mark fields invalid while still entering text. Using only CSS this can be circumvented, so that validations happen afterwards.
When working on creating a complete keyboard navigation experience for Discord, using styling with :focus and outline, the folks at Discord ran into issues where the outline would not match the shape of actual element being rendered. Thinks like border-radius, overflow: hidden; on the container, padding got in the way. So they set out to …
Continue reading “How Discord Implemented App-Wide Keyboard Navigation”
Great research by Zell Liew: I noticed browsers were inconsistent in how they handle a click on <button>. Some browsers choose to focus on the button. Some browsers don’t. In this article, I want to show you my test and findings. Then, I want to talk about a way to overcome these inconsistencies. Great to …
Continue reading “Clicking Buttons: Inconsistent behavior across browsers”
Great article by Hidde. It totally rhymes with my Building Better Forms™ by not taking away affordances post. It’s a common, but fairly easy-to-fix accessibility issue: lack of indicating focus. In this post I will explain what we mean by focus and show you how focus outlines make your site easier to use. Indicating focus …
Continue reading “Indicating focus to improve accessibility”
Present code with style using spectacle. Awesome way to present code, and putting the focus of the reader where it needs to be. It also lets you jump to specific lines even if they’ve already been displayed before (because code tends to jump). import React from 'react'; import { Spectacle, Deck } from 'spectacle'; import …
Continue reading “Spectacle CodeSlide: Present code with style”