fix(storefront): BCTHEME-155 fix recaptcha announcement for hidden co…

…ntent (#1943)
bigcommerce · Jan 18, 2021 · bff8526 · bff8526
1 parent c169162
commit bff8526
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed announcement of reCAPTCHA hidden content by screen reader. [#1943](https://github.com/bigcommerce/cornerstone/pull/1943)
 - Carousel buttons do not receive focus. [#1937](https://github.com/bigcommerce/cornerstone/pull/1937)
 - Empty cart message not read by screen reader. [#1935](https://github.com/bigcommerce/cornerstone/pull/1935)
 - No tooltips provided for carousel buttons. [#1934](https://github.com/bigcommerce/cornerstone/pull/1934)

diff --git a/assets/js/theme/auth.js b/assets/js/theme/auth.js
@@ -11,6 +11,7 @@ export default class Auth extends PageManager {
         super(context);
         this.validationDictionary = createTranslationDictionary(context);
         this.formCreateSelector = 'form[data-create-account-form]';
+        this.recaptcha = $('.g-recaptcha iframe[src]');
     }
 
     registerLoginValidation($loginForm) {
@@ -175,6 +176,10 @@ export default class Auth extends PageManager {
      * Request is made in this function to the remote endpoint and pulls back the states for country.
      */
     onReady() {
+        if (!this.recaptcha.attr('title')) {
+            this.recaptcha.attr('title', this.context.recaptchaTitle);
+        }
+
         const $createAccountForm = classifyForm(this.formCreateSelector);
         const $loginForm = classifyForm('.login-form');
         const $forgotPasswordForm = classifyForm('.forgot-password-form');

diff --git a/lang/en.json b/lang/en.json
@@ -255,7 +255,8 @@
             "heading": "Your account has been created",
             "intro": "Thank you for creating your account at {store_name}. Your account details have been emailed to <strong>{email}</strong>",
             "continue": "Continue Shopping"
-        }
+        },
+        "recaptcha_title": "Google recaptcha"
     },
     "login": {
         "heading": "Sign in",

diff --git a/templates/pages/auth/create-account.html b/templates/pages/auth/create-account.html
@@ -1,4 +1,5 @@
 {{inject 'passwordRequirements' settings.password_requirements}}
+{{inject 'recaptchaTitle' (lang 'create_account.recaptcha_title')}}
 {{#partial "page"}}
     {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
     <h1 class="page-heading">{{lang 'create_account.heading' }}</h1>