https://capolicylab.org/wp-content/themes/capolicylab/assets/js/accessibility-popup-fix.js?ver=1787943864

1/**
2 * Accessibility enhancements for the Boxzilla newsletter popup.
3 *
4 * Boxzilla creates its close icon as a <span> and binds its own click handler
5 * straight to that node (Box.prototype.events, boxzilla/assets/js/script.js).
6 * Swapping the span for a <button> creates a *new* node, so Boxzilla's handler
7 * is left on the detached original and the "x" stops closing the box.
8 *
9 * Everything below therefore enhances the icon in place: same node, same
10 * Boxzilla handler, plus button semantics and keyboard activation.
11 */
12
13// Make the close icons focusable and operable from the keyboard.
14function enhanceCloseIcons() {
15	var closeIcons = document.querySelectorAll('.boxzilla-close-icon');
16
17	Array.prototype.forEach.call(closeIcons, function (closeIcon) {
18		// Only enhance each icon once.
19		if (closeIcon.getAttribute('data-a11y-enhanced') === '1') {
20			return;
21		}
22		closeIcon.setAttribute('data-a11y-enhanced', '1');
23
24		// A real <button> would be preferable, but replacing the element
25		// detaches Boxzilla's click handler. Give the span the same
26		// semantics instead.
27		if (closeIcon.tagName.toLowerCase() !== 'button') {
28			closeIcon.setAttribute('role', 'button');
29			closeIcon.setAttribute('tabindex', '0');
30		}
31
32		if (!closeIcon.getAttribute('aria-label')) {
33			closeIcon.setAttribute('aria-label', 'Close');
34		}
35
36		// Enter and Space fire click on a native button; on a span we do it.
37		closeIcon.addEventListener('keydown', function (event) {
38			var key = event.key;
39
40			if (key === 'Enter' || key === ' ' || key === 'Spacebar' || event.keyCode === 13 || event.keyCode === 32) {
41				event.preventDefault();
42				closeIcon.click();
43			}
44		});
45	});
46}
47
48// Add ARIA attributes to the subscription Boxzilla popup.
49function enhanceSubscriptionPopupAccessibility() {
50	var popup = document.querySelector('.boxzilla.boxzilla-bottom-right.boxzilla-sample-box');
51	if (!popup) {
52		return;
53	}
54
55	popup.setAttribute('role', 'region');
56	popup.setAttribute('aria-label', 'Subscription form');
57}
58
59// Boxzilla injects the box after its trigger fires, so watch for it.
60var observer = new MutationObserver(function () {
61	enhanceCloseIcons();
62	enhanceSubscriptionPopupAccessibility();
63});
64
65// Wait for the DOM content to be fully loaded before starting to observe.
66document.addEventListener('DOMContentLoaded', function () {
67	enhanceCloseIcons();
68	enhanceSubscriptionPopupAccessibility();
69
70	observer.observe(document.body, {
71		childList: true,
72		subtree: true
73	});
74});