<form method="post" action="/cart/add">
<!-- Fieldset with options goes here-->
<button type="submit">
Add to Cart
</button>
</form>
<form method="post" action="/cart/add">
<button type="submit" id="add-to-cart">
Adding...
</button>
</form>
addToCart(item).then(() => {
const button = document.getElementById('add-to-cart');
button.innerText = 'Adding...'
})
<form method="post" action="/cart/add">
<button type="submit" id="add-to-cart">
Adding...
</button>
</form>
<div aria-live="polite" id="live-region">
Adding...
</div>
addToCart(item).then(() => {
const liveRegion = document.getElementById('live-region');
const button = document.getElementById('add-to-cart');
liveRegion.innerText = 'Adding...'
button.innerText = 'Adding...'
})
disabled
or aria-disabled
?
<button type="submit" disabled="">
Adding...
</button>
<!-- or -->
<button type="submit" aria-disabled="true">
Adding...
</button>
<div id="notification" tabindex="-1">
A Delightful Product has been added to your cart
</div>
addToCart(item).then(() => {
const notification =
document.getElementById('notification');
notification.innerText =
`${item.title} has been added to your cart`
notification.focus();
})
Toasts and dialogs are fundamentally different
aria-modal="true"
should have more support, but inert
works for now<dialog>
is just about here!<div>
with role="dialog"
aria-labelledby