Use live region to announce recipient form

Shopify · May 26, 2023 · d1df340 · d1df340
1 parent b729111
commit d1df340
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/assets/recipient-form.js b/assets/recipient-form.js
@@ -2,15 +2,16 @@ if (!customElements.get('recipient-form')) {
   customElements.define('recipient-form', class RecipientForm extends HTMLElement {
     constructor() {
       super();
-      this.checkboxInput = this.querySelector(`#Recipient-checkbox-${ this.dataset.sectionId }`);
+      this.recipientFieldsLiveRegion = this.querySelector(`#Recipient-fields-live-region-${this.dataset.sectionId}`);
+      this.checkboxInput = this.querySelector(`#Recipient-checkbox-${this.dataset.sectionId}`);
       this.checkboxInput.disabled = false;
-      this.hiddenControlField = this.querySelector(`#Recipient-control-${ this.dataset.sectionId }`);
+      this.hiddenControlField = this.querySelector(`#Recipient-control-${this.dataset.sectionId}`);
       this.hiddenControlField.disabled = true;
-      this.emailInput = this.querySelector(`#Recipient-email-${ this.dataset.sectionId }`);
-      this.nameInput = this.querySelector(`#Recipient-name-${ this.dataset.sectionId }`);
-      this.messageInput = this.querySelector(`#Recipient-message-${ this.dataset.sectionId }`);
-      this.sendonInput = this.querySelector(`#Recipient-send-on-${ this.dataset.sectionId }`);
-      this.offsetProperty = this.querySelector(`#Recipient-timezone-offset-${ this.dataset.sectionId }`);
+      this.emailInput = this.querySelector(`#Recipient-email-${this.dataset.sectionId}`);
+      this.nameInput = this.querySelector(`#Recipient-name-${this.dataset.sectionId}`);
+      this.messageInput = this.querySelector(`#Recipient-message-${this.dataset.sectionId}`);
+      this.sendonInput = this.querySelector(`#Recipient-send-on-${this.dataset.sectionId}`);
+      this.offsetProperty = this.querySelector(`#Recipient-timezone-offset-${this.dataset.sectionId}`);
       if (this.offsetProperty) this.offsetProperty.value = new Date().getTimezoneOffset();
 
       this.errorMessageWrapper = this.querySelector('.product-form__recipient-error-message-wrapper');
@@ -63,10 +64,12 @@ if (!customElements.get('recipient-form')) {
     onChange() {
       if (this.checkboxInput.checked) {
         this.enableInputFields();
+        this.recipientFieldsLiveRegion.setAttribute('aria-hidden', false)
       } else {
         this.clearInputFields();
         this.disableInputFields();
         this.clearErrorMessage();
+        this.recipientFieldsLiveRegion.setAttribute('aria-hidden', true)
       }
     }
 
@@ -101,8 +104,8 @@ if (!customElements.get('recipient-form')) {
       if (typeof body === 'object') {
         this.errorMessage.innerText = this.defaultErrorHeader;
         return Object.entries(body).forEach(([key, value]) => {
-          const errorMessageId = `RecipientForm-${ key }-error-${ this.dataset.sectionId }`
-          const fieldSelector = `#Recipient-${ key }-${ this.dataset.sectionId }`;
+          const errorMessageId = `RecipientForm-${key}-error-${this.dataset.sectionId}`
+          const fieldSelector = `#Recipient-${key}-${this.dataset.sectionId}`;
           const message = `${value.join(', ')}`;
           const errorMessageElement = this.querySelector(`#${errorMessageId}`);
           const errorTextElement = errorMessageElement?.querySelector('.error-message')

diff --git a/locales/en.default.json b/locales/en.default.json
@@ -466,6 +466,7 @@
   "recipient": {
     "form": {
       "checkbox": "I want to send this as a gift",
+      "expanded": "Gift card recipient form expanded",
       "email_label": "Recipient email",
       "email_label_optional_for_no_js_behavior": "Recipient email (optional)",
       "email": "Email",

diff --git a/snippets/gift-card-recipient-form.liquid b/snippets/gift-card-recipient-form.liquid
@@ -74,6 +74,15 @@
         {%- endif -%}
       </ul>
     </div>
+    <p
+      id="Recipient-fields-live-region-{{ section.id }}"
+      class="visually-hidden"
+      aria-live="polite"
+      aria-hidden="true"
+      role="status"
+    >
+      {{- 'recipient.form.expanded' | t -}}
+    </p>
     <div class="recipient-fields">
       <hr>
       <div class="recipient-fields__field">