♿ Announce story discovery dialog for screen readers (#32964)

* Remove aria-hidden=true to announce story 360 status messages * Create string for 360 gyroscope experience prompt * Remove dialog text in discovery template; set translated dialog text before template is appended to page * Update extensions/amp-story/1.0/_locales/en.json Co-authored-by: Philip Bell <philipbell@google.com> * Update extensions/amp-story/1.0/_locales/default.json Co-authored-by: Philip Bell <philipbell@google.com> Co-authored-by: Enrique Marroquin <5449100+Enriqe@users.noreply.github.com>
ampproject · Mar 18, 2021 · 4c06c96 · 4c06c96
1 parent aa6c2fb
commit 4c06c96
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/extensions/amp-story-360/0.1/amp-story-360.js b/extensions/amp-story-360/0.1/amp-story-360.js
@@ -111,9 +111,7 @@ const buildActivateButtonTemplate = (element) => htmlFor(element)`
 const buildDiscoveryTemplate = (element) => htmlFor(element)`
     <div class="i-amphtml-story-360-discovery" aria-live="polite">
       <div class="i-amphtml-story-360-discovery-animation"></div>
-      <span class="i-amphtml-story-360-discovery-text" aria-hidden="true">
-        Move device to explore
-      </span>
+      <span class="i-amphtml-story-360-discovery-text"></span>
     </div>
   `;
 
@@ -562,6 +560,14 @@ export class AmpStory360 extends AMP.BaseElement {
     ) {
       const page = this.getPage_();
       const discoveryTemplate = page && buildDiscoveryTemplate(page);
+      // Support translation of discovery dialogue text.
+      this.mutateElement(() => {
+        discoveryTemplate.querySelector(
+          '.i-amphtml-story-360-discovery-text'
+        ).textContent = this.localizationService_.getLocalizedString(
+          LocalizedStringId.AMP_STORY_DISCOVERY_DIALOG_TEXT
+        );
+      });
       this.mutateElement(() => page.appendChild(discoveryTemplate));
     }
   }

diff --git a/extensions/amp-story/1.0/_locales/default.json b/extensions/amp-story/1.0/_locales/default.json
@@ -38,5 +38,6 @@
   "84": {"string": "SCORE:"},
   "85": {"string": "Pause"},
   "86": {"string": "Play"},
-  "89": {"string": "Your response will be sent to"}
+  "89": {"string": "Your response will be sent to"},
+  "96": {"string": "Move device to explore"}
 }
diff --git a/extensions/amp-story/1.0/_locales/en.json b/extensions/amp-story/1.0/_locales/en.json
@@ -274,5 +274,9 @@
   "95": {
     "string": "Show bookend",
     "description": "Label for a button that displays a dialog with related articles and sharing options."
+  },
+  "96": {
+    "string": "Move device to explore",
+    "description": "Text displayed to users on gyroscope activation of an amp-story-360 component, telling them to move their device to experience the gyroscope effect."
   }
 }
diff --git a/src/localized-strings.js b/src/localized-strings.js
@@ -24,7 +24,7 @@ import {parseJson} from './json';
  *   - NOT be reused; to deprecate an ID, comment it out and prefix its key with
  *     the string "DEPRECATED_"
  *
- * Next ID: 96
+ * Next ID: 97
  *
  * @const @enum {string}
  */
@@ -44,6 +44,7 @@ export const LocalizedStringId = {
   AMP_STORY_CONSENT_ACCEPT_BUTTON_LABEL: '22',
   AMP_STORY_CONSENT_DECLINE_BUTTON_LABEL: '23',
   AMP_STORY_CONTINUE_ANYWAY_BUTTON_LABEL: '27',
+  AMP_STORY_DISCOVERY_DIALOG_TEXT: '96',
   AMP_STORY_DOMAIN_DIALOG_HEADING_LABEL: '25',
   AMP_STORY_DOMAIN_DIALOG_HEADING_LINK: '26',
   AMP_STORY_EDUCATION_NAVIGATION_SWIPE_PROGRESS: '78',