<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;
}
View Compiled
/*
* 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"));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.