From e652d5f35c6298d66eadd4d3ce14f37e6f74022e Mon Sep 17 00:00:00 2001
From: nikita puzanenko <nikita.puzanenko@bigcommerce.com>
Date: Wed, 30 Aug 2023 14:12:32 -0500
Subject: [PATCH] feat(storefront): PSE-805 Add autocomplete to common input
 fields

---
 CHANGELOG.md                                       | 1 +
 templates/components/account/edit-account.html     | 8 ++++----
 templates/components/cart/shipping-estimator.html  | 2 +-
 templates/components/common/subscription-form.html | 1 +
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2ea897af6..4a573c309a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Replace Twitter logo with X logo within social sharing and social link components [#2387](https://github.com/bigcommerce/cornerstone/pull/2387)
 - Added nvm config [#2389](https://github.com/bigcommerce/cornerstone/pull/2389)
 - Displaying the Hidden cart_order_source Input Field on PDP page [#2392](https://github.com/bigcommerce/cornerstone/pull/2392) 
+- Adding autocomplete to common input fields
 
 ## 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
index 19fc9d06dd..ce560ab78a 100644
--- 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
index e1b98c2f27..e1e9655b2f 100644
--- 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
index 27b8149bdf..555d9d6201 100644
--- 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"