Skip to content

Instantly share code, notes, and snippets.

View robdodson's full-sized avatar
🏠
Working from home

Rob Dodson robdodson

🏠
Working from home
2.9k followers · 49 following
View GitHub Profile
@robdodson
robdodson / radio-group.html
Created October 4, 2016 21:58
A Custom Element radio group which demonstrates roving tabindex
<!--
Copyright 2016 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
@robdodson
robdodson / webpack.config.js
Last active November 22, 2023 13:33
/* webpack.config.js */
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
module.exports = {
// Tell Webpack which file kicks off our app.
entry: path.resolve(__dirname, 'src/index.js'),
// Tell Weback to output our bundle to ./dist/bundle.js
@robdodson
robdodson / index.html
Last active October 4, 2023 18:57
Shady DOM example
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Hello from outside the Shadow DOM!</h2>
@robdodson
robdodson / keyboard-focus.js
Last active September 16, 2023 18:09
Differentiate between mouse and keyboard focus
// Handlers managed by the addFocusStates and removeFocusStates methods.
var onMouseDown = function() {
this.classList.add('pressed');
};
var onMouseUp = function() {
this.classList.remove('pressed');
};
var onFocus = function() {
@robdodson
robdodson / service-worker.js
Created September 7, 2016 21:18
/**
* Copyright 2016 Google Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
@robdodson
robdodson / feed.xml
Created January 10, 2020 16:15
This file has been truncated, but you can view the full file.
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>web.dev</title>
<subtitle>Let&#39;s build the future of the web.</subtitle>
<link href="https://web.dev/feed.xml" rel="self"/>
<link href="https://web.dev"/>
<updated>2018-11-04T16:00:00-08:00</updated>
<id>https://web.dev/</id>
<author>
<name>Google Developers</name>
@robdodson
robdodson / .eleventy.js
Last active November 8, 2021 11:54
Memoize an eleventy collection.
const {memoize} = require('find-by-slug');
// Turn collection.all into a lookup table so we can use findBySlug
// to quickly find collection items without looping.
config.addCollection('memoized', function(collection) {
return memoize(collection.getAll());
});
@robdodson
robdodson / focus-visible-tabindex.md
Last active July 29, 2021 03:40
:focus-visible tabindex

One of the intentions of :focus-visible is to not match if someone mouse-clicks on a div (or other generic element) with a tabindex. The reason is because developers often build custom controls using generic elements and when they unexpectedly show a focus ring on mouse click these same developer reach for :focus { outline: none; } which we really want to discourage.

The spec attempts to explain that :focus-visible should not match when you mouse click an element with a tabindex, but does so in a way that maybe isn't explicit enough. Quoting from the spec:

If the element which supports keyboard input (such as an input element, or any other element that would triggers a virtual keyboard to be shown on focus if a physical keyboard were not present), indicate focus.

This attempts to highlight the concept of "supporting keyboard input". Noteably a div with a tabindex would not meet this criteria.

If the user interacts with the page via

@robdodson
robdodson / .eleventy.js
Created June 29, 2021 17:29
module.exports = function (config) {
config.addPlugin(EleventyServerlessBundlerPlugin, {
name: 'possum', // The serverless function name from your permalink object
functionsDir: './functions/',
});
return {
dir: {
input: 'src/site/content/', // we use a string path with the forward slash since windows doesn't like the paths generated from path.join
output: 'dist',
@robdodson
robdodson / focus-visible-meta.md
Last active May 5, 2021 20:04
:focus-visible meta keys

Explainer

This is discussed in this issue but it looks like we updated the polyfill and forgot to update the spec :(

How we arrived at this decision

Slack asked if we should only match :focus-visible on tab / shift-tab (or in cases where the element should always receive it, like an input). Twitter chimed in with a +1. They both said essentially that when folks hit keyboard shortcuts that move focus, it's confusing to see the ring show up.

Alice pointed out that it's just as likely for a keyboard user to use those same shortcuts and it might be confusing for them to not see the ring.