44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
// ── Tag pill tooltips: tap toggle (touch devices only) ────────
|
|
(function () {
|
|
// Hover-capable devices already get the tooltips via :hover
|
|
if (window.matchMedia('(hover: hover)').matches) return;
|
|
|
|
const pills = [...document.querySelectorAll('[data-tip]')];
|
|
|
|
function closeAll() {
|
|
pills.forEach(p => {
|
|
p.classList.remove('tip-open');
|
|
p.setAttribute('aria-expanded', 'false');
|
|
});
|
|
}
|
|
|
|
pills.forEach(pill => {
|
|
pill.setAttribute('tabindex', '0');
|
|
pill.setAttribute('role', 'button');
|
|
pill.setAttribute('aria-expanded', 'false');
|
|
// Pseudo-element tooltips are invisible to screen readers
|
|
pill.setAttribute('aria-description', pill.dataset.tip);
|
|
|
|
pill.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const wasOpen = pill.classList.contains('tip-open');
|
|
closeAll();
|
|
if (!wasOpen) {
|
|
pill.classList.add('tip-open');
|
|
pill.setAttribute('aria-expanded', 'true');
|
|
}
|
|
});
|
|
pill.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
pill.click();
|
|
}
|
|
});
|
|
});
|
|
|
|
document.addEventListener('click', closeAll);
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') closeAll();
|
|
});
|
|
})();
|