From bff8526aa71725c7ea21decdf296713d1b10f634 Mon Sep 17 00:00:00 2001
From: Alex Saiannyi <67792608+bc-alexsaiannyi@users.noreply.github.com>
Date: Mon, 18 Jan 2021 21:47:08 +0200
Subject: [PATCH] fix(storefront): BCTHEME-155 fix recaptcha announcement for
 hidden content (#1943)

---
 CHANGELOG.md                             | 1 +
 assets/js/theme/auth.js                  | 5 +++++
 lang/en.json                             | 3 ++-
 templates/pages/auth/create-account.html | 1 +
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5fde0240d1..31189602e9 100644
--- 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
index 23c11dfba2..9aaa227a84 100644
--- 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
index 6bd571467b..e9bc927298 100755
--- 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
index a2cfd76bf1..0a59017f3c 100644
--- 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>