Button (Toggle)
Button (Toggle)
A toggle button is similar to a checkbox because it is either selected or not selected, and every toggle button can operate independent of all other toggle buttons. In fact, a checkbox can be an acceptable alternative to a toggle button.
Turn on a screen reader to experience this example in action.
HTML Source Code
<div>
<div role="button" id="div-button" class="button" tabindex="0" aria-pressed="false" >Aria Toggle Button</div>
<button type="button" id="native-button" aria-pressed="false" >Native Toggle Button</button>
</div>
JavaScript Source Code
window.addEventListener('load', function () {
document.getElementById('div-button').addEventListener('click', divButtonClicked);
document.getElementById('div-button').addEventListener('keydown', keydownButtonHandler);
document.getElementById('native-button').addEventListener('click', nativeButtonClicked);
});
const CHECK_ICON = '<i class="fa-solid fa-circle-check icon success"></i>';
function divButtonClicked()
{
var button = document.getElementById("div-button");
var isAriaPressed = toggleButton(button);
if(isAriaPressed)
{
button.innerHTML = "ARIA Toggle Button";
button.classList.remove("pressed");
}
else
{
button.innerHTML = CHECK_ICON+" ARIA Toggle Button";
button.classList.add("pressed");
}
}
function toggleButton(button)
{
var isAriaPressed = button.getAttribute('aria-pressed') === 'true';
button.setAttribute('aria-pressed', isAriaPressed ? 'false' : 'true');
return isAriaPressed;
}
function nativeButtonClicked()
{
var button = document.getElementById("native-button");
var isAriaPressed = toggleButton(button);
if(isAriaPressed)
button.innerHTML = "Native Toggle Button";
else
button.innerHTML = CHECK_ICON+" Native Toggle Button";
}
function keydownButtonHandler(event) {
if (event.keyCode === 32) {
event.preventDefault();
event.target.click();
}
else if (event.keyCode === 13) {
event.preventDefault();
event.target.click();
}
}
CSS Source Code
.button {
padding: 5px 10px;
display: inline-block;
border: 2px solid gray;
border-left: 1px solid lightgray;
border-top: 1px solid lightgray;
border-right: 2px solid gray;
border-bottom: 2px solid gray;
margin: 2px;
background-color: #e8e5e5;
}
.pressed {
border-left: 2px solid gray;
border-top: 2px solid gray;
border-right: 1px solid lightgray;
border-bottom: 1px solid lightgray;
}
button { padding: 10px 10px; margin: 5px;}
.button:hover{
outline: 2px solid blue;
}
.button:focus{
margin: 2px;
outline: 2px solid blue;
}