<div class="container">
  <button class="button">Visible Button</button>
  <button class="button sr-only" id="hidden">Hidden Button</button>
  <button class="button">Visible Button</button>
</div>

<!-- DEMO ONLY -->

<nav class="demo-header">
  <label>
    <input type="checkbox" id="toggle">
    Enable focus class
  </label>
  <small>This will enable the "smart" hidden class that will exclude focused elements.<br>On change it will focus on the hidden button</small>
</nav>

<div class="tooltip" id="explainer">
  <p id="explainerFocus">The button appears when it is in focus.<br>
    Try to change the class in header.</p>

  <p class="show" id="explainerSR">You are currently focused on the button but it is not visible.<br>
    Try to change the class in header.</p>
</div>

/**
 * Accesible way to hide things in CSS.
*/
%visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/**
 * This will hide elements even if you are focused on them.
*/
.sr-only {
  @extend %visually-hidden;
}

/**
 * Smart hiding class
 * This will NOT hide an element if active or in focus.
 */
.hidden:not(:focus):not(:active) {
  @extend %visually-hidden;
}

/**
 * Template CSS
 * This is used only for demo.
 */

body {
  padding-top: 80px;
}

.container {
  text-align: center;
  padding: 40px;
}

.button {
  font-size: 100%;
  padding: 0.5em 1em;
  color: rgba(0, 0, 0, 0.8);
  border: transparent;
  background-color: #e6e6e6;
  text-decoration: none;
  border-radius: 2px;
  margin: 0 1em;
  cursor: pointer;
}

.button:hover {
  background-color: dodgerblue;
}

.button:focus {
  background-color: firebrick;
}

.demo-header {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 48px;
  background-color: rgba(#fff, 0.7);
  border-bottom: 1px solid #e9ebf2;
}

.tooltip {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 5px;
  margin: 32px 0;
  max-width: 300px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background-color: #000;
  text-align: center;
  color: #ffffff;
  line-height: 1.5;
  z-index: 1050;

  p {
    display: none;
  }
}

.show {
  display: block !important;
}

/*
 * IT IS USED ONLY FOR THE DEMO
 */

const button = document.querySelectorAll("button");
button.forEach((button) =>
  button.addEventListener("click", () => alert("You clicked a button"))
);

const checkbox = document.getElementById("toggle");
const hiddenButton = document.getElementById("hidden");
const explainer = document.getElementById("explainer");
const explainerSR = document.getElementById("explainerSR");
const explainerFocus = document.getElementById("explainerFocus");

checkbox.addEventListener("change", (e) => {
  hiddenButton.focus();
  if (e.target.checked) {
    hiddenButton.classList.add("hidden");
    hiddenButton.classList.remove("sr-only");
    explainerFocus.classList.add("show");
    explainerSR.classList.remove("show");
  } else {
    hiddenButton.classList.remove("hidden");
    hiddenButton.classList.add("sr-only");
    explainerFocus.classList.remove("show");
    explainerSR.classList.add("show");
  }
});

hiddenButton.addEventListener("focus", () => explainer.classList.add("show"));
hiddenButton.addEventListener("blur", () => explainer.classList.remove("show"));