Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Repro Firefox :focus-visible issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Repro Firefox :focus-visible issue</title>
<style>
a, a:visited {
color: blue
}
html {
font-size: 1.5rem;
}
:focus {
outline: 2px solid red;
}
:focus:not(:focus-visible) {
outline: none;
}
</style>
</head>
<body>
<h1>Repro Firefox :focus-visible issue</h1>
<h2>Home page</h2>
<nav>
<ul>
<li><a href="/">Home page</a></li>
<li><a href="/about">About page</a></li>
<li><a href="/other">Other page</a></li>
</ul>
</nav>
<script src="https://unpkg.com/navigo@8.10.1/lib/navigo.js"></script>
<script>
(() => {
const pageToLastFocused = new Map()
const router = new Navigo(location.pathname)
const h2 = document.querySelector('h2')
let currentPage = '/'
const restoreFocus = () => {
// repro what a SPA does – clear out the DOM
document.querySelector('ul').innerHTML = `
<li><a href="/">Home page</a></li>
<li><a href="/about">About page</a></li>
<li><a href="/other">Other page</a></li>
`
if (pageToLastFocused.has(currentPage)) {
const href = pageToLastFocused.get(currentPage)
console.log('focusing', href)
document.querySelector(`a[href=${JSON.stringify(href)}]`).focus()
}
}
router
.on('/', () => {
h2.textContent = 'Home page'
currentPage = '/'
restoreFocus()
})
.on('/about', () => {
h2.textContent = 'About page'
currentPage = '/about'
restoreFocus()
})
.on('/other', () => {
h2.textContent = 'Other page'
currentPage = '/other'
restoreFocus()
})
document.querySelector('nav').addEventListener('click', e => {
e.preventDefault()
router.navigate(new URL(e.target.href).pathname)
})
document.querySelector('nav').addEventListener('focusin', (e) => {
const href = e.target.getAttribute('href')
console.log('last focused for', currentPage, 'is', href)
pageToLastFocused.set(currentPage, href)
})
})()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment