Fixed tabable links (#32840)

ampproject · Feb 24, 2021 · e3eeb03 · e3eeb03
1 parent 7b8b417
commit e3eeb03
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/examples/amp-story/interactives.html b/examples/amp-story/interactives.html
@@ -50,7 +50,11 @@ <h2>What is the best story ever?</h2>
                 layout="responsive"
                 height="1600"
                 width="900">
-                <h1 style="position: absolute;top: 0;z-index: 1">Hello!</h1>
+                <h1 style="position: absolute;top: 0;z-index: 1">
+                  This is a
+                  <a href="https://example.com" tabindex="2">Link</a>
+                </h1>
+
             </amp-img>
           </amp-story-grid-layer>
           <amp-story-grid-layer template="center">

diff --git a/extensions/amp-story/1.0/amp-story-page.js b/extensions/amp-story/1.0/amp-story-page.js
@@ -110,6 +110,7 @@ export const Selectors = {
   ALL_PLAYBACK_MEDIA:
     '> audio, amp-story-grid-layer audio, amp-story-grid-layer video',
   ALL_VIDEO: 'amp-story-grid-layer video',
+  ALL_TABBABLE: 'a',
 };
 
 /** @private @const {string} */
@@ -363,6 +364,7 @@ export class AmpStoryPage extends AMP.BaseElement {
     this.setPageDescription_();
     this.element.setAttribute('role', 'region');
     this.initializeImgAltTags_();
+    this.initializeTabbableElements_();
   }
 
   /** @private */
@@ -1270,6 +1272,7 @@ export class AmpStoryPage extends AMP.BaseElement {
       this.findAndPrepareEmbeddedComponents_();
       registerAllPromise.then(() => this.preloadAllMedia_());
     }
+    this.toggleTabbableElements_(distance == 0);
   }
 
   /**
@@ -1870,4 +1873,30 @@ export class AmpStoryPage extends AMP.BaseElement {
   isAutoAdvance() {
     return this.advancement_.isAutoAdvance();
   }
+
+  /**
+   * Set the data-orig-tabindex to the default tabindex of tabbable elements
+   */
+  initializeTabbableElements_() {
+    scopedQuerySelectorAll(this.element, Selectors.ALL_TABBABLE).forEach(
+      (el) => {
+        el.setAttribute('data-orig-tabindex', el.getAttribute('tabindex') || 0);
+      }
+    );
+  }
+
+  /**
+   * Toggles the tabbable elements (buttons, links, etc) to only reach them when page is active.
+   * @param {boolean} toggle
+   */
+  toggleTabbableElements_(toggle) {
+    scopedQuerySelectorAll(this.element, Selectors.ALL_TABBABLE).forEach(
+      (el) => {
+        el.setAttribute(
+          'tabindex',
+          toggle ? el.getAttribute('data-orig-tabindex') : -1
+        );
+      }
+    );
+  }
 }