[ampproject/amphtml] ♿ [Story a11y] aria-label on amp-story-360 canvas (

#32871)

* aria-label on canvas element

* Assert element.

* Add alt text comment.

* Set alt text in layout callback.

examples/amp-story/amp-story-360.html

@@ -21,7 +21,7 @@
       <amp-story-page id="cover">
         <amp-story-grid-layer template="fill">
           <amp-story-360 layout="fill" heading-start="30" pitch-start="20" heading-end="-20" pitch-end="10" duration="5s" controls="gyroscope">
-            <amp-video poster="img/nasa_training_poster.jpg" autoplay layout="fill" loop>
+            <amp-video poster="img/nasa_training_poster.jpg" autoplay layout="fill" loop alt-text="Astronaut space walk training">
               <!-- Credit: NASA -->
               <!-- https://commons.wikimedia.org/wiki/File:NASA_VR-360_Astronaut_Training-_Space_Walk.webm -->
               <source src="img/NASA_VR_360_Astronaut_Training_Space_Walk_Clip.mp4" type="video/mp4" />
@@ -35,14 +35,14 @@
           scene-pitch="-5">
             <!-- Curiosity self-portrat, Sol 1462 (September 2016) Credit: NASA / JPL / MSSS / Seán Doran -->
             <!-- https://informal.jpl.nasa.gov/museum/360-video -->
-            <amp-img src="img/SeanDoran-Quela-sol1462-edited_ver2-sm.jpg" width="1998" height="999"></amp-img>
+            <amp-img src="img/SeanDoran-Quela-sol1462-edited_ver2-sm.jpg" width="1998" height="999" alt-text="Curiosity self-portrait"></amp-img>
           </amp-story-360>
         </amp-story-grid-layer>
       </amp-story-page>
       <amp-story-page id="page2">
         <amp-story-grid-layer template="fill">
           <amp-story-360 layout="fill" heading-start="95" pitch-start="-10" heading-end="-60" pitch-end="-20" duration="3s" controls="gyroscope">
-            <amp-img src="img/Equirectangular_projection_SW.jpg" width="2058" height="1036"></amp-img>
+            <amp-img src="img/Equirectangular_projection_SW.jpg" width="2058" height="1036" alt-text="globe"></amp-img>
           </amp-story-360>
         </amp-story-grid-layer>
       </amp-story-page>

extensions/amp-story-360/0.1/amp-story-360.js

@@ -679,6 +679,14 @@ export class AmpStory360 extends AMP.BaseElement {
       'amp-story-360 must contain an amp-img or amp-video element.'
     );
 
+    // Puts alt-text on canvas element so it can be read by screen readers.
+    // The media element is hidden with CSS it no longer can read it.
+    const altText = (ampImgEl || this.ampVideoEl_).getAttribute('alt-text');
+    if (altText) {
+      this.canvas_.setAttribute('role', 'img');
+      this.canvas_.setAttribute('aria-label', altText);
+    }
+
     if (ampImgEl) {
       return this.setupAmpImgRenderer_(ampImgEl);
     }