♿ [Story a11y] Improve screen reader output for interactive components (#32969)

* Interactive components options to buttons

* Changed comment

* Added aria live

* Ussing classList to get option

* Added readability to quizzes

* Changing polls

* Fixing binary polls and polls

* Fix double reading of option in quiz

* Consistency in string interpolation

* Remove unused import

Author: mszylkowski

extensions/amp-story-interactive/0.1/amp-story-interactive-abstract.js

@@ -542,7 +542,7 @@ export class AmpStoryInteractive extends AMP.BaseElement {
    * @protected @abstract
    * @param {!Array<!InteractiveOptionType>} unusedOptionsData
    */
-  updateOptionPercentages_(unusedOptionsData) {
+  displayOptionsData(unusedOptionsData) {
     // Subclass must implement
   }
 
@@ -792,7 +792,7 @@ export class AmpStoryInteractive extends AMP.BaseElement {
 
     if (this.optionsData_) {
       this.rootEl_.classList.add('i-amphtml-story-interactive-has-data');
-      this.updateOptionPercentages_(this.optionsData_);
+      this.displayOptionsData(this.optionsData_);
     }
     this.getOptionElements().forEach((el) => {
       el.setAttribute('tabindex', -1);

extensions/amp-story-interactive/0.1/amp-story-interactive-binary-poll.js

@@ -71,7 +71,9 @@ const buildOptionTemplate = (element) => {
         <span class="i-amphtml-story-interactive-option-title"
           ><span class="i-amphtml-story-interactive-option-title-text"></span
         ></span>
-        <span class="i-amphtml-story-interactive-option-percentage-text"
+        <span
+          class="i-amphtml-story-interactive-option-percentage-text"
+          aria-hidden="true"
           >0%</span
         >
       </span>
@@ -220,29 +222,29 @@ export class AmpStoryInteractiveBinaryPoll extends AmpStoryInteractive {
   /**
    * @override
    */
-  updateOptionPercentages_(responseData) {
+  displayOptionsData(responseData) {
     if (!responseData) {
       return;
     }
 
     const percentages = this.preprocessPercentages_(responseData);
 
-    percentages.forEach((percentage, index) => {
+    this.getOptionElements().forEach((el, index) => {
       // TODO(jackbsteinberg): Add i18n support for various ways of displaying percentages.
-      const currOption = this.getOptionElements()[index];
-      currOption.querySelector(
+      const percentage = percentages[index];
+      const percentageEl = el.querySelector(
         '.i-amphtml-story-interactive-option-percentage-text'
-      ).textContent = `${percentage}%`;
+      );
+      percentageEl.textContent = `${percentage}%`;
+      percentageEl.removeAttribute('aria-hidden');
 
       setStyle(
-        currOption.querySelector(
-          '.i-amphtml-story-interactive-option-percent-bar'
-        ),
+        el.querySelector('.i-amphtml-story-interactive-option-percent-bar'),
         'transform',
         `scaleX(${percentage * 0.01 * 2})`
       );
 
-      const textContainer = currOption.querySelector(
+      const textContainer = el.querySelector(
         '.i-amphtml-story-interactive-option-text-container'
       );
 
@@ -252,6 +254,12 @@ export class AmpStoryInteractiveBinaryPoll extends AmpStoryInteractive {
           this.getTransformVal_(percentage) * (index === 0 ? 1 : -1)
         }%) !important`
       );
+      if (responseData[index].selected) {
+        textContainer.setAttribute(
+          'aria-label',
+          'selected ' + textContainer.textContent
+        );
+      }
 
       if (percentage === 0) {
         setStyle(textContainer, 'opacity', '0');

extensions/amp-story-interactive/0.1/amp-story-interactive-poll.js

@@ -128,19 +128,24 @@ export class AmpStoryInteractivePoll extends AmpStoryInteractive {
   /**
    * @override
    */
-  updateOptionPercentages_(optionsData) {
+  displayOptionsData(optionsData) {
     if (!optionsData) {
       return;
     }
 
     const percentages = this.preprocessPercentages_(optionsData);
 
-    percentages.forEach((percentage, index) => {
-      const currOption = this.getOptionElements()[index];
-      currOption.querySelector(
+    this.getOptionElements().forEach((el, index) => {
+      if (optionsData[index].selected) {
+        const textEl = el.querySelector(
+          '.i-amphtml-story-interactive-option-text'
+        );
+        textEl.setAttribute('aria-label', 'selected ' + textEl.textContent);
+      }
+      el.querySelector(
         '.i-amphtml-story-interactive-option-percentage-text'
-      ).textContent = `${percentage}`;
-      setStyle(currOption, '--option-percentage', percentages[index] + '%');
+      ).textContent = percentages[index];
+      setStyle(el, '--option-percentage', percentages[index] + '%');
     });
   }
 

extensions/amp-story-interactive/0.1/amp-story-interactive-quiz.js

@@ -22,6 +22,7 @@ import {CSS} from '../../../build/amp-story-interactive-quiz-0.1.css';
 import {LocalizedStringId} from '../../../src/localized-strings';
 import {htmlFor} from '../../../src/static-template';
 import {setStyle} from '../../../src/style';
+import objstr from 'obj-str';
 
 /**
  * Generates the template for the quiz.
@@ -121,9 +122,10 @@ export class AmpStoryInteractiveQuiz extends AmpStoryInteractive {
     const convertedOption = buildOptionTemplate(this.element);
 
     // Fill in the answer choice and set the option ID
-    convertedOption.querySelector(
+    const answerChoiceEl = convertedOption.querySelector(
       '.i-amphtml-story-interactive-quiz-answer-choice'
-    ).textContent = this.localizedAnswerChoices_[index];
+    );
+    answerChoiceEl.textContent = this.localizedAnswerChoices_[index];
     convertedOption.optionIndex_ = option['optionIndex'];
 
     // Extract and structure the option information
@@ -148,18 +150,35 @@ export class AmpStoryInteractiveQuiz extends AmpStoryInteractive {
   /**
    * @override
    */
-  updateOptionPercentages_(optionsData) {
+  displayOptionsData(optionsData) {
     if (!optionsData) {
       return;
     }
 
     const percentages = this.preprocessPercentages_(optionsData);
-    percentages.forEach((percentage, index) => {
-      const option = this.getOptionElements()[index];
-      option.querySelector(
+
+    this.getOptionElements().forEach((el, index) => {
+      // Update the aria-label so they read "selected" and "correct" or "incorrect"
+      const ariaDescription = objstr({
+        selected: optionsData[index].selected,
+        correct: el.hasAttribute('correct'),
+        incorrect: !el.hasAttribute('correct'),
+      });
+      el.querySelector(
+        '.i-amphtml-story-interactive-quiz-answer-choice'
+      ).setAttribute('aria-hidden', true);
+      const optionText = el.querySelector(
+        '.i-amphtml-story-interactive-quiz-option-text'
+      );
+      optionText.setAttribute(
+        'aria-label',
+        ariaDescription + ' ' + optionText.textContent
+      );
+      // Update percentage text
+      el.querySelector(
         '.i-amphtml-story-interactive-quiz-percentage-text'
-      ).textContent = `${percentage}%`;
-      setStyle(option, '--option-percentage', percentage + '%');
+      ).textContent = `${percentages[index]}%`;
+      setStyle(el, '--option-percentage', `${percentages[index]}%`);
     });
   }
 }

extensions/amp-story-interactive/0.1/amp-story-interactive-results.js

@@ -268,7 +268,7 @@ export class AmpStoryInteractiveResults extends AmpStoryInteractive {
   }
 
   /** @override */
-  updateOptionPercentages_(unusedOptionsData) {
+  displayOptionsData(unusedOptionsData) {
     // TODO(mszylkowski): Show percentages of categories if endpoint.
   }