<div class="instructions">
  (click here, then press <code>TAB</code>)
<button tabindex="-1" class="inactive">
  Can't reach me with the TAB key!
<button class="active">
  Click to focus() the previous element
body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;

.instructions {
  margin: 8px;

button {
  display: inline-block;
  font-size: 16px;
  border: 2px solid black;
  border-radius: 8px;
  padding: 8px;
  margin: 8px;

button:focus {
  outline: 4px dashed darkorange;
const inactiveButton = document.querySelector(".inactive");
const activeButton = document.querySelector(".active");
activeButton.addEventListener("click", () => inactiveButton.focus());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.