feat(storefront): PSE-805 Add autocomplete to common input fields (bi…

…gcommerce#2397) Co-authored-by: Volodymyr Krasnoshapka <88093058+BC-krasnoshapka@users.noreply.github.com>
sacr3dc0w · Dec 19, 2023 · 278a7aa · 278a7aa
1 parent 88d37a9
commit 278a7aa
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,7 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Changed default PayPal checkout button size [#2406](https://github.com/bigcommerce/cornerstone/pull/2406)
 - Change case of Page builder menu item text [#2407](https://github.com/bigcommerce/cornerstone/pull/2407)
 - Corrected typo with the word default previously deafault in config.json [#2410](https://github.com/bigcommerce/cornerstone/pull/2410)
-
+- Adding autocomplete to common input fields [2397](https://github.com/bigcommerce/cornerstone/pull/2397)
 
 ## 6.12.0 (07-06-2023)
 - sync package lock file [#2373](https://github.com/bigcommerce/cornerstone/pull/2373)

diff --git a/templates/components/account/edit-account.html b/templates/components/account/edit-account.html
@@ -10,26 +10,26 @@
                     {{lang 'account.settings.first_name' }}
                     <small>{{lang 'common.required' }}</small>
                 </label>
-                <input aria-labelledby="account_firstname_id" aria-live="polite" type="text" class="form-input" name="account_firstname" id="account_firstname" value="{{forms.edit_account.first_name}}">
+                <input aria-labelledby="account_firstname_id" aria-live="polite" autocomplete="given-name" type="text" class="form-input" name="account_firstname" id="account_firstname" value="{{forms.edit_account.first_name}}">
             </div>
             <div class="form-field" id="account_lastname_id">
                 <label class="form-label" for="account_lastname">
                     {{lang 'account.settings.last_name' }}
                     <small>{{lang 'common.required' }}</small>
                 </label>
-                <input aria-labelledby="account_lastname_id" aria-live="polite" type="text" class="form-input" name="account_lastname" id="account_lastname" value="{{forms.edit_account.last_name}}">
+                <input aria-labelledby="account_lastname_id" aria-live="polite" autocomplete="family-name" type="text" class="form-input" name="account_lastname" id="account_lastname" value="{{forms.edit_account.last_name}}">
             </div>
             <div class="form-field" id="account_companyname_id">
                 <label class="form-label" for="account_companyname">
                     {{lang 'account.settings.company' }}
                 </label>
-                <input aria-labelledby="account_companyname_id" aria-live="polite" type="text" class="form-input" name="account_companyname" id="account_companyname" value="{{forms.edit_account.company_name}}">
+                <input aria-labelledby="account_companyname_id" aria-live="polite" autocomplete="organization" type="text" class="form-input" name="account_companyname" id="account_companyname" value="{{forms.edit_account.company_name}}">
             </div>
             <div class="form-field" id="account_phone_id">
                 <label class="form-label" for="account_phone">
                     {{lang 'account.settings.phone' }}
                 </label>
-                <input aria-labelledby="account_phone_id" aria-live="polite" type="text" class="form-input" name="account_phone" id="account_phone" value="{{forms.edit_account.phone}}">
+                <input aria-labelledby="account_phone_id" aria-live="polite" autocomplete="tel" type="text" class="form-input" name="account_phone" id="account_phone" value="{{forms.edit_account.phone}}">
             </div>
             {{#each forms.edit_account.fields}}
                 {{{dynamicComponent 'components/common/forms'}}}

diff --git a/templates/components/cart/shipping-estimator.html b/templates/components/cart/shipping-estimator.html
@@ -65,7 +65,7 @@
                 <label class="form-label" for="shipping-zip">{{lang 'cart.shipping_estimator.zip_postal_code'}}</label>
             </dt>
             <dd class="estimator-form-input">
-                <input class="form-input" type="text" id="shipping-zip" name="shipping-zip" value="{{selected_zip}}" placeholder="{{lang 'cart.shipping_estimator.zip_postal_code'}}">
+                <input autocomplete="postal-code" class="form-input" type="text" id="shipping-zip" name="shipping-zip" value="{{selected_zip}}" placeholder="{{lang 'cart.shipping_estimator.zip_postal_code'}}">
             </dd>
             <button class="button button--primary button--small shipping-estimate-submit">{{lang 'cart.shipping_estimator.estimate_shipping'}}</button>
         </dl>

diff --git a/templates/components/common/subscription-form.html b/templates/components/common/subscription-form.html
@@ -17,6 +17,7 @@ <h3 class="footer-info-heading">{{lang 'newsletter.subscribe'}}</h3>
                        placeholder="{{lang 'newsletter.email_placeholder'}}"
                        aria-describedby="alertBox-message-text"
                        aria-required="true"
+                       autocomplete="email"
                        required
                 >
                 <input class="button button--primary form-prefixPostfix-button--postfix"