|
1 | | -import { ENGrid, EnForm, EngridLogger } from "."; |
| 1 | +import { ENGrid, EnForm, EngridLogger, A11y } from "."; |
2 | 2 | export class Ecard { |
3 | 3 | constructor() { |
4 | 4 | this._form = EnForm.getInstance(); |
5 | 5 | this.logger = new EngridLogger("Ecard", "red", "#f5f5f5", "🪪"); |
6 | 6 | if (!this.shouldRun()) |
7 | 7 | return; |
| 8 | + this.altsAndArias(); |
8 | 9 | this._form.onValidate.subscribe(() => this.checkRecipientFields()); |
9 | 10 | const schedule = ENGrid.getUrlParameter("engrid_ecard.schedule"); |
10 | 11 | const scheduleField = ENGrid.getField("ecard.schedule"); |
@@ -58,4 +59,198 @@ export class Ecard { |
58 | 59 | } |
59 | 60 | return true; |
60 | 61 | } |
| 62 | + altsAndArias() { |
| 63 | + document.querySelectorAll(".en__ecarditems__list").forEach((list) => { |
| 64 | + this.altsAndAriasEcardItemsList(list); |
| 65 | + }); |
| 66 | + const ecardMessage = document.querySelector(".en__ecardmessage"); |
| 67 | + if (ecardMessage) { |
| 68 | + this.coupleH2AndInput(ecardMessage, "Add a Message to your eCard"); |
| 69 | + } |
| 70 | + const ecardRecipients = document.querySelector(".en__ecardrecipients"); |
| 71 | + if (ecardRecipients) { |
| 72 | + const recipientName = ecardRecipients.querySelector(".en__ecardrecipients__name"); |
| 73 | + if (recipientName) { |
| 74 | + this.coupleLabelAndInput(recipientName, "Recipient Name"); |
| 75 | + } |
| 76 | + const recipientEmail = ecardRecipients.querySelector(".en__ecardrecipients__email"); |
| 77 | + if (recipientEmail) { |
| 78 | + this.coupleLabelAndInput(recipientEmail, "Recipient Email"); |
| 79 | + } |
| 80 | + } |
| 81 | + const ecardFutureDelivery = document.querySelector(".en__ecardrecipients__futureDelivery"); |
| 82 | + if (ecardFutureDelivery) { |
| 83 | + this.coupleH2AndInput(ecardFutureDelivery, "Schedule your eCard for future delivery"); |
| 84 | + } |
| 85 | + const previewButton = document.querySelector(".en__ecarditems__showprev"); |
| 86 | + if (previewButton) { |
| 87 | + previewButton.setAttribute("aria-controls", "ecard-preview"); |
| 88 | + previewButton.setAttribute("aria-haspopup", "dialog"); |
| 89 | + } |
| 90 | + const previewModal = document.querySelector(".en__ecarditems__preview"); |
| 91 | + if (previewModal) { |
| 92 | + previewModal.setAttribute("role", "dialog"); |
| 93 | + previewModal.setAttribute("aria-modal", "true"); |
| 94 | + previewModal.setAttribute("aria-label", "Ecard Preview Modal"); |
| 95 | + previewModal.setAttribute("id", "ecard-preview"); |
| 96 | + const closeButton = previewModal.querySelector(".en__ecarditems__prevclose"); |
| 97 | + if (closeButton) { |
| 98 | + closeButton.setAttribute("role", "button"); |
| 99 | + closeButton.setAttribute("aria-label", "Close Preview"); |
| 100 | + document.addEventListener("keydown", (e) => { |
| 101 | + if (e.key === "Escape" && |
| 102 | + previewModal.classList.contains("preview--show")) { |
| 103 | + closeButton.click(); |
| 104 | + } |
| 105 | + }); |
| 106 | + } |
| 107 | + const iframe = previewModal.querySelector("iframe"); |
| 108 | + if (iframe) { |
| 109 | + iframe.setAttribute("title", "Ecard Preview Frame"); |
| 110 | + } |
| 111 | + const observer = new MutationObserver((mutations) => { |
| 112 | + mutations.forEach((mutation) => { |
| 113 | + if (mutation.type === "attributes" && |
| 114 | + mutation.attributeName === "class") { |
| 115 | + const target = mutation.target; |
| 116 | + if (target.classList.contains("preview--show")) { |
| 117 | + A11y.inertPage(true, previewModal); |
| 118 | + // Focus the iframe or the first focusable element in the modal |
| 119 | + const focusableElements = previewModal.querySelectorAll('iframe, a[href], area[href], button:not([disabled]), object, embed, [tabindex="0"]'); |
| 120 | + if (focusableElements.length) { |
| 121 | + focusableElements[0].focus(); |
| 122 | + } |
| 123 | + } |
| 124 | + else { |
| 125 | + A11y.inertPage(false); |
| 126 | + // Return focus to the preview button |
| 127 | + if (previewButton) { |
| 128 | + previewButton.focus(); |
| 129 | + } |
| 130 | + } |
| 131 | + } |
| 132 | + }); |
| 133 | + }); |
| 134 | + observer.observe(previewModal, { |
| 135 | + attributes: true, |
| 136 | + attributeFilter: ["class"], |
| 137 | + }); |
| 138 | + } |
| 139 | + } |
| 140 | + altsAndAriasEcardItemsList(list) { |
| 141 | + // if there's a sibling h2, use its text as the aria-label for the list |
| 142 | + const h2 = list.previousElementSibling; |
| 143 | + if (h2 && h2.tagName === "H2") { |
| 144 | + const id = `ecard-list-${Math.random().toString(36).substring(2, 9)}`; |
| 145 | + h2.setAttribute("id", id); |
| 146 | + list.setAttribute("aria-labelledby", id); |
| 147 | + } |
| 148 | + list.setAttribute("role", "radiogroup"); |
| 149 | + const thumbs = Array.from(list.querySelectorAll(".en__ecarditems__thumb")); |
| 150 | + let isSelection = false; |
| 151 | + thumbs.forEach((thumb, index) => { |
| 152 | + thumb.setAttribute("role", "radio"); |
| 153 | + if (thumb.classList.contains("thumb--active")) { |
| 154 | + thumb.setAttribute("aria-checked", "true"); |
| 155 | + thumb.setAttribute("tabindex", "0"); |
| 156 | + isSelection = true; |
| 157 | + } |
| 158 | + else { |
| 159 | + thumb.setAttribute("aria-checked", "false"); |
| 160 | + thumb.setAttribute("tabindex", "-1"); |
| 161 | + } |
| 162 | + const img = thumb.querySelector("img"); |
| 163 | + if (img) { |
| 164 | + thumb.setAttribute("aria-label", img.alt || "Ecard Thumbnail"); |
| 165 | + img.setAttribute("aria-hidden", "true"); |
| 166 | + } |
| 167 | + // Keyboard navigation (WAI-ARIA radio group pattern) |
| 168 | + thumb.addEventListener("keydown", (e) => { |
| 169 | + let nextIndex = null; |
| 170 | + switch (e.key) { |
| 171 | + case "ArrowRight": |
| 172 | + case "ArrowDown": |
| 173 | + nextIndex = (index + 1) % thumbs.length; |
| 174 | + break; |
| 175 | + case "ArrowLeft": |
| 176 | + case "ArrowUp": |
| 177 | + nextIndex = (index - 1 + thumbs.length) % thumbs.length; |
| 178 | + break; |
| 179 | + case "Home": |
| 180 | + nextIndex = 0; |
| 181 | + break; |
| 182 | + case "End": |
| 183 | + nextIndex = thumbs.length - 1; |
| 184 | + break; |
| 185 | + case "Enter": |
| 186 | + case " ": |
| 187 | + e.preventDefault(); |
| 188 | + thumb.click(); |
| 189 | + return; |
| 190 | + default: |
| 191 | + return; |
| 192 | + } |
| 193 | + e.preventDefault(); |
| 194 | + // In a radio group, moving focus also selects the option. |
| 195 | + // click() lets EN's own handler set the value + thumb--active class; |
| 196 | + // the MutationObserver below then syncs aria-checked + tabindex. |
| 197 | + thumbs[nextIndex].focus(); |
| 198 | + thumbs[nextIndex].click(); |
| 199 | + }); |
| 200 | + }); |
| 201 | + if (!isSelection && thumbs.length) { |
| 202 | + thumbs[0].setAttribute("tabindex", "0"); |
| 203 | + } |
| 204 | + // MutationObserver to watch for "thumb--active" class changes and keep |
| 205 | + // aria-checked + roving tabindex in sync with the selected thumb |
| 206 | + const observer = new MutationObserver((mutations) => { |
| 207 | + mutations.forEach((mutation) => { |
| 208 | + if (mutation.type === "attributes" && |
| 209 | + mutation.attributeName === "class") { |
| 210 | + const target = mutation.target; |
| 211 | + if (target.classList.contains("thumb--active")) { |
| 212 | + target.setAttribute("aria-checked", "true"); |
| 213 | + // Roving tabindex: only the active thumb is tabbable |
| 214 | + target.setAttribute("tabindex", "0"); |
| 215 | + thumbs.forEach((t) => { |
| 216 | + if (t !== target) |
| 217 | + t.setAttribute("tabindex", "-1"); |
| 218 | + }); |
| 219 | + } |
| 220 | + else { |
| 221 | + target.setAttribute("aria-checked", "false"); |
| 222 | + } |
| 223 | + } |
| 224 | + }); |
| 225 | + }); |
| 226 | + observer.observe(list, { |
| 227 | + attributes: true, |
| 228 | + subtree: true, |
| 229 | + attributeFilter: ["class"], |
| 230 | + }); |
| 231 | + } |
| 232 | + coupleLabelAndInput(parent, labelText) { |
| 233 | + const label = parent.querySelector("label"); |
| 234 | + const input = parent.querySelector("input, textarea, select"); |
| 235 | + if (label && input) { |
| 236 | + const id = `ecard-input-${Math.random().toString(36).substring(2, 9)}`; |
| 237 | + label.setAttribute("id", id); |
| 238 | + input.setAttribute("aria-labelledby", id); |
| 239 | + } |
| 240 | + else if (input) { |
| 241 | + input.setAttribute("aria-label", labelText); |
| 242 | + } |
| 243 | + } |
| 244 | + coupleH2AndInput(parent, labelText) { |
| 245 | + const h2 = parent.querySelector("h2"); |
| 246 | + const input = parent.querySelector("textarea, input, select"); |
| 247 | + if (h2 && input) { |
| 248 | + const id = `ecard-message-${Math.random().toString(36).substring(2, 9)}`; |
| 249 | + h2.setAttribute("id", id); |
| 250 | + input.setAttribute("aria-labelledby", id); |
| 251 | + } |
| 252 | + else if (input) { |
| 253 | + input.setAttribute("aria-label", labelText); |
| 254 | + } |
| 255 | + } |
61 | 256 | } |
0 commit comments