Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Focus visible keyboard shortcuts repro
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Focus visible keyboard shortcuts repro</title>
*, *:after, *:before {
box-sizing: border-box;
:focus:not(:focus-visible) {
outline: none;
:focus-visible {
outline: 4px solid red;
body {
max-width: 600px;
margin: 0 auto;
article {
width: 100%;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
border: 2px solid black;
button {
margin: 20px
<h1>Focus visible keyboard shortcuts repro</h1>
<p>Click the button with the mouse, then press the up/down arrows on the keyboard:</p>
<button type="button">Click here with the mouse</button>
<div tabindex="0" aria-label="feed" aria-role="feed">
<article tabindex="0" aria-setsize="10" aria-posinset="1">one</article>
<article tabindex="0" aria-setsize="10" aria-posinset="2">two</article>
<article tabindex="0" aria-setsize="10" aria-posinset="3">three</article>
<article tabindex="0" aria-setsize="10" aria-posinset="4">four</article>
<article tabindex="0" aria-setsize="10" aria-posinset="5">five</article>
<article tabindex="0" aria-setsize="10" aria-posinset="6">six</article>
<article tabindex="0" aria-setsize="10" aria-posinset="7">seven</article>
<article tabindex="0" aria-setsize="10" aria-posinset="8">eight</article>
<article tabindex="0" aria-setsize="10" aria-posinset="9">nine</article>
<article tabindex="0" aria-setsize="10" aria-posinset="10">ten</article>
const $ = document.querySelector.bind(document)
document.addEventListener('keydown', e => {
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
const up = e.key === 'ArrowUp'
let current = parseInt(document.activeElement.getAttribute('aria-posinset') || '-1', 10)
current += (up ? -1 : 1)
current = Math.min(10, Math.max(1, current))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment