feat(storefront): BCTHEME-128 Error messages from Write a Review form…

… should be announced
bigcommerce · Aug 10, 2020 · 058596d · 058596d
1 parent 353c9c8
commit 058596d
Show file tree

Hide file tree

Showing 12 changed files with 125 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Error messages from Write a Review should be announced. [#1777](https://github.com/bigcommerce/cornerstone/pull/1777)
 
 ## 4.9.0 (08-05-2020)
 

diff --git a/assets/js/theme/product.js b/assets/js/theme/product.js
@@ -39,6 +39,7 @@ export default class Product extends PageManager {
 
         $('body').on('click', '[data-reveal-id="modal-review-form"]', () => {
             validator = review.registerValidation(this.context);
+            this.ariaDescribeReviewInputs($reviewForm);
         });
 
         $reviewForm.on('submit', () => {
@@ -54,6 +55,16 @@ export default class Product extends PageManager {
         this.bulkPricingHandler();
     }
 
+    ariaDescribeReviewInputs($form) {
+        $form.find('[data-input]').each((_, input) => {
+            const $input = $(input);
+            const msgSpanId = `${$input.attr('name')}-msg`;
+
+            $input.siblings('span').attr('id', msgSpanId);
+            $input.attr('aria-describedby', msgSpanId);
+        });
+    }
+
     productReviewHandler() {
         if (this.url.indexOf('#write_review') !== -1) {
             this.$reviewLink.trigger('click');

diff --git a/templates/components/common/forms/checkbox.html b/templates/components/common/forms/checkbox.html
@@ -6,7 +6,16 @@
     </label>
     {{#if checkboxes}}
         {{#each checkboxes}}
-            <input type="checkbox" value="{{value}}" name="{{name}}" id="{{name}}" data-label="{{label}}" class="form-checkbox" {{#if checked}}checked{{/if}} {{#if private_id}}data-field-type="{{private_id}}"{{/if}}>
+            <input type="checkbox"
+                   value="{{value}}"
+                   name="{{name}}"
+                   id="{{name}}"
+                   data-input
+                   data-label="{{label}}"
+                   class="form-checkbox"
+                   {{#if checked}}checked{{/if}}
+                   {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
+            >
             <label class="form-label {{class}}" for="{{name}}">{{label}}</label>
         {{/each}}
     {{/if}}

diff --git a/templates/components/common/forms/date.html b/templates/components/common/forms/date.html
@@ -3,21 +3,42 @@
     {{#if required}}<small>{{lang 'common.required' }}</small>{{/if}}</label>
     <div class="form-row form-row--third">
         <div class="form-field">
-            <select class="form-select" name="{{month.name}}" id="{{id}}_month" data-label="month"  aria-required="{{required}}" {{#if private_id}}data-field-type="{{private_id}}"{{/if}}>
+            <select class="form-select"
+                    name="{{month.name}}"
+                    id="{{id}}_month"
+                    data-label="month"
+                    data-input
+                    aria-required="{{required}}"
+                    {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
+            >
                 {{#each month.items}}
                     <option {{#if ../month.value '==' value}} selected {{/if}}value="{{value}}">{{label}}</option>
                 {{/each}}
             </select>
         </div>
         <div class="form-field">
-            <select class="form-select" name="{{day.name}}" id="{{id}}_day" data-label="day" aria-required="{{required}}" {{#if private_id}}data-field-type="{{private_id}}"{{/if}}>
+            <select class="form-select"
+                    name="{{day.name}}"
+                    id="{{id}}_day"
+                    data-label="day"
+                    data-input
+                    aria-required="{{required}}"
+                    {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
+            >
                 {{#each day.items}}
                     <option {{#if ../day.value '==' value}} selected {{/if}}value="{{value}}">{{label}}</option>
                 {{/each}}
             </select>
         </div>
         <div class="form-field">
-            <select class="form-select" name="{{year.name}}" id="{{id}}_year" data-label="year" aria-required="{{required}}" {{#if private_id}}data-field-type="{{private_id}}"{{/if}}>
+            <select class="form-select"
+                    name="{{year.name}}"
+                    id="{{id}}_year"
+                    data-label="year"
+                    data-input
+                    aria-required="{{required}}"
+                    {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
+            >
                 {{#each year.items}}
                     <option {{#if ../year.value '==' value}} selected {{/if}}value="{{value}}">{{label}}</option>
                 {{/each}}

diff --git a/templates/components/common/forms/multiline.html b/templates/components/common/forms/multiline.html
@@ -4,5 +4,15 @@
             <small>{{lang 'common.required' }}</small>
         {{/if}}
     </label>
-    <textarea name="{{name}}" id="{{id}}_input" data-label="{{label}}" rows="{{rows}}" aria-required="{{required}}" class="form-input" {{#if private_id}}data-field-type="{{private_id}}"{{/if}}>{{value}}</textarea>
+    <textarea name="{{name}}"
+              id="{{id}}_input"
+              data-label="{{label}}"
+              rows="{{rows}}"
+              aria-required="{{required}}"
+              data-input
+              class="form-input"
+              {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
+    >
+        {{value}}
+    </textarea>
 </div>
diff --git a/templates/components/common/forms/number.html b/templates/components/common/forms/number.html
@@ -2,5 +2,18 @@
     <label class="form-label" for="{{id}}_input">{{label}}
         {{#if required}}<small>{{lang 'common.required' }}</small>{{/if}}
     </label>
-    <input type="number" class="form-input" data-label="{{label}}" data-rule="lowerThan" min="{{limitfrom}}" max="{{limitto}}" title="{{lang 'forms.range' limitFrom=limitfrom limitTo=limitto}}" value="{{value}}" id="{{id}}_input" name="{{name}}" aria-required="{{required}}" {{#if private_id}}data-field-type="{{private_id}}"{{/if}}>
+    <input type="number"
+           class="form-input"
+           data-label="{{label}}"
+           data-input
+           data-rule="lowerThan"
+           min="{{limitfrom}}"
+           max="{{limitto}}"
+           title="{{lang 'forms.range' limitFrom=limitfrom limitTo=limitto}}"
+           value="{{value}}"
+           id="{{id}}_input"
+           name="{{name}}"
+           aria-required="{{required}}"
+           {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
+    >
 </div>
diff --git a/templates/components/common/forms/password.html b/templates/components/common/forms/password.html
@@ -4,5 +4,14 @@
             <small>{{lang 'common.required' }}</small>
         {{/if}}
     </label>
-    <input type="password"  class="form-input" id="{{id}}_input" data-label="{{label}}" name="{{name}}" value="{{value}}" autocomplete="off" aria-required="{{required}}" {{#if private_id}}data-field-type="{{private_id}}"{{/if}}>
+    <input type="password"
+           class="form-input"
+           id="{{id}}_input"
+           data-label="{{label}}"
+           name="{{name}}"
+           value="{{value}}"
+           autocomplete="off"
+           aria-required="{{required}}"
+           {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
+    >
 </div>
diff --git a/templates/components/common/forms/radio.html b/templates/components/common/forms/radio.html
@@ -6,20 +6,18 @@
     </label>
     {{#if radios}}
         {{#each radios}}
-            <input 
+            <input
                 type="radio"
                 class="form-radio"
                 name="{{../name}}"
                 id="{{../name}}_{{@index}}"
                 value="{{value}}"
                 data-label="{{label}}"
+                data-input
                 aria-required="{{required}}"
-                {{#if checked}}
-                    checked
-                {{/if}}
-                {{#if private_id}}
-                    data-field-type="{{private_id}}"
-                {{/if}}>
+                {{#if checked}}checked{{/if}}
+                {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
+            >
             <label class="form-label" for="{{../name}}_{{@index}}">{{label}}</label>
         {{/each}}
     {{/if}}

diff --git a/templates/components/common/forms/select.html b/templates/components/common/forms/select.html
@@ -3,13 +3,19 @@
     <label class="form-label" for="{{id}}_select">{{label}}
         {{#if required}}<small>{{lang 'common.required' }}</small>{{/if}}
     </label>
-    <select class="{{class}} form-select" id="{{id}}_select" data-label="{{label}}" aria-required="{{required}}" name="{{name}}"
-        {{#if private_id}} data-field-type="{{private_id}}" {{/if}}>
+    <select class="{{class}} form-select"
+            id="{{id}}_select"
+            data-label="{{label}}"
+            data-input
+            aria-required="{{required}}"
+            name="{{name}}"
+            {{#if private_id}} data-field-type="{{private_id}}" {{/if}}
+    >
         {{#if options}}
         <option value="">{{chooseprefix}}</option>
         {{#each options}}
         <option {{#if selected}} selected {{/if}} value="{{value}}">{{{label}}}</option>
         {{/each}}
         {{/if}}
     </select>
-</div>
+</div>
diff --git a/templates/components/common/forms/selectortext.html b/templates/components/common/forms/selectortext.html
@@ -3,15 +3,30 @@
         <label class="form-label" for="{{id}}_input">{{label}}
             {{#if required}}<small>{{lang 'common.required' }}</small>{{/if}}
         </label>
-        <input type="text" id="{{id}}_input" name="{{name}}" value="{{value}}" class="form-input" aria-required="{{required}}" data-label="{{label}}" />
+        <input type="text"
+               id="{{id}}_input"
+               name="{{name}}"
+               value="{{value}}"
+               class="form-input"
+               aria-required="{{required}}"
+               data-label="{{label}}"
+               data-input
+        />
     </noscript>
 
     <label class="form-label" for="{{id}}_select">{{label}}
         {{#if required}}
             <small>{{lang 'common.required'}}</small>
         {{/if}}
     </label>
-    <select name="{{name}}" class="form-select" aria-required="{{required}}" id="{{id}}_select" data-label="{{label}}" {{#if private_id}}data-field-type="{{private_id}}"{{/if}}>
+    <select name="{{name}}"
+            class="form-select"
+            aria-required="{{required}}"
+            id="{{id}}_select"
+            data-label="{{label}}"
+            data-input
+            {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
+    >
         {{#if options}}
             <option value="">{{chooseprefix}}</option>
             {{#each options}}

diff --git a/templates/components/common/forms/text.html b/templates/components/common/forms/text.html
@@ -2,5 +2,16 @@
     <label class="form-label" for="{{id}}_input">{{label}}
         {{#if required}}<small>{{lang 'common.required' }}</small>{{/if}}
     </label>
-    <input type="text" id="{{id}}_input" data-label="{{label}}" name="{{name}}" {{#if value}} value="{{value}}"{{/if}} {{#if placeholder}} placeholder="{{placeholder}}"{{/if}} class="form-input" aria-required="{{required}}" {{#if private_id}}data-field-type="{{private_id}}"{{/if}} {{#if maxlength}}maxlength="{{maxlength}}"{{/if}}>
+    <input type="text"
+           name="{{name}}"
+           id="{{id}}_input"
+           class="form-input"
+           data-label="{{label}}"
+           data-input
+           aria-required="{{required}}"
+           {{#if value}} value="{{value}}"{{/if}}
+           {{#if maxlength}}maxlength="{{maxlength}}"{{/if}}
+           {{#if placeholder}} placeholder="{{placeholder}}"{{/if}}
+           {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
+    >
 </div>
diff --git a/templates/components/products/modals/writeReview.html b/templates/components/products/modals/writeReview.html
@@ -30,7 +30,7 @@ <h5 class="product-title">{{ product.title }}</h5>
                     </label>
                     <!-- Stars -->
                     <!-- TODO: Review Stars need to be componentised, both for display and input -->
-                    <select id="rating-rate" class="form-select" name="revrating">
+                    <select id="rating-rate" class="form-select" name="revrating" data-input>
                         <option value="">{{lang 'products.reviews.select_rating'}}</option>
                         {{#for 1 5}}
                             {{#if ../product.reviews.selected_rating '===' $index}}