♿ [Story a11y] Improve tabbing on social-share and bookend (#32859)

* Started updating tabindex * More work * Fixed share icons on start * Removed console logs * Use visibility CSS * Reverted original code * Visible -> initial * Added comment and tabbable get link * Using root container for visibility * Add visibility on drawer when dragging * Bring back supports landscape * i18n of get link * Added comment for a11y on visibility inherit * Added comment again * Fixed rendering of bot * Added comment to trigger on enter or space
ampproject · Feb 26, 2021 · d2c1006 · d2c1006
1 parent 6a86004
commit d2c1006
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 27 deletions.
diff --git a/examples/amp-story/attachment.html b/examples/amp-story/attachment.html
@@ -57,6 +57,7 @@
           <p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p>
 
           <p>Ut tristique et egestas quis ipsum. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Elementum curabitur vitae nunc sed velit dignissim. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. At elementum eu facilisis sed odio morbi. Imperdiet proin fermentum leo vel orci porta non. Quam lacus suspendisse faucibus interdum. Eu non diam phasellus vestibulum lorem sed risus. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut sem viverra aliquet eget sit amet. Nulla facilisi morbi tempus iaculis. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Donec ultrices tincidunt arcu non sodales. Amet venenatis urna cursus eget. Sapien et ligula ullamcorper malesuada proin. Tristique sollicitudin nibh sit amet commodo nulla facilisi. Venenatis tellus in metus vulputate eu scelerisque felis.</p>
+          <a href="https://linkinattachment.com">Link in page attachment</a>
         </amp-story-page-attachment>
       </amp-story-page>
 

diff --git a/extensions/amp-story/1.0/amp-story-bookend.css b/extensions/amp-story/1.0/amp-story-bookend.css
@@ -17,6 +17,10 @@
 @import './amp-story-shadow-reset.css';
 @import './amp-story-share.css';
 
+:host {
+  visibility: inherit !important; /* Will propagate visibility of drawer to shadow dom for a11y */
+}
+
 .i-amphtml-story-bookend {
   display: flex !important;
   font-family: 'Roboto', sans-serif !important;

diff --git a/extensions/amp-story/1.0/amp-story-draggable-drawer.css b/extensions/amp-story/1.0/amp-story-draggable-drawer.css
@@ -24,7 +24,8 @@
   overflow: hidden !important;
   z-index: 4 !important; /** Over amp-story-cta-layer. */
   transform: translate3d(0, 100%, 0) !important;
-  transition: transform 0.25s cubic-bezier(0.4, 0.0, 1, 1) !important;
+  transition: transform 0.25s cubic-bezier(0.4, 0.0, 1, 1), visibility 0s linear 0.4s !important;
+  visibility: hidden !important;
 }
 
 .amp-story-draggable-drawer-root[hidden] {
@@ -33,7 +34,8 @@
 
 .amp-story-draggable-drawer-root.i-amphtml-story-draggable-drawer-open {
   transform: translate3d(0, 0, 0) !important;
-  transition: transform 0.4s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
+  transition: transform 0.4s cubic-bezier(0.0, 0.0, 0.2, 1), visibility 0s linear 0s !important;
+  visibility: visible !important;
 }
 
 .i-amphtml-story-draggable-drawer {
@@ -81,12 +83,12 @@
   justify-content: center !important;
   background: rgba(0, 0, 0, 0.55) !important;
   opacity: 0 !important;
-  transition: opacity 0.15s cubic-bezier(0.4, 0.0, 1, 1), transform 0s linear 0.15s !important;
+  transition: opacity 0.15s cubic-bezier(0.4, 0.0, 1, 1), transform 0s linear 0.15s, visibility 0s linear 0.4s !important;
 }
 
 [desktop] .amp-story-draggable-drawer-root.i-amphtml-story-draggable-drawer-open {
   opacity: 1 !important;
-  transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
+  transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1), visibility 0s linear 0s !important;
   transform: translate3d(0, 0, 0) !important;
 }
 

diff --git a/extensions/amp-story/1.0/amp-story-draggable-drawer.js b/extensions/amp-story/1.0/amp-story-draggable-drawer.js
@@ -484,6 +484,7 @@ export class DraggableDrawer extends AMP.BaseElement {
       setImportantStyles(this.element, {
         transform: translate,
         transition: 'none',
+        visibility: 'visible',
       });
     });
   }
@@ -503,7 +504,7 @@ export class DraggableDrawer extends AMP.BaseElement {
 
     this.mutateElement(() => {
       this.element.setAttribute('aria-hidden', false);
-      resetStyles(this.element, ['transform', 'transition']);
+      resetStyles(this.element, ['transform', 'transition', 'visibility']);
 
       if (!shouldAnimate) {
         // Resets the 'transition' property, and removes this override in the

diff --git a/extensions/amp-story/1.0/amp-story-page-attachment.css b/extensions/amp-story/1.0/amp-story-page-attachment.css
@@ -16,6 +16,10 @@
 
 /** Remote attachment styles. */
 
+:host {
+  visibility: inherit !important; /* Will propagate visibility of drawer to shadow dom for a11y */
+}
+
 .i-amphtml-story-page-attachment-remote {
   height: 48px !important;
   bottom: 0 !important;

diff --git a/extensions/amp-story/1.0/amp-story-share-menu.css b/extensions/amp-story/1.0/amp-story-share-menu.css
@@ -27,12 +27,14 @@
   transform: translate3d(0, 100vh, 0) !important;
   transition-delay: 0.15s !important;
   pointer-events: none !important;
+  visibility: hidden !important;
 }
 
 .i-amphtml-story-share-menu-visible {
   transform: translate3d(0, 0, 0) !important;
   transition-delay: 0s !important;
   pointer-events: auto !important;
+  visibility: initial !important;
 }
 
 /** Black opacity overlay. */

diff --git a/extensions/amp-story/1.0/amp-story-share.css b/extensions/amp-story/1.0/amp-story-share.css
@@ -128,14 +128,9 @@
   background-position: 5px 5px !important;
 }
 
-.i-amphtml-story-share-icon:active,
 .i-amphtml-story-share-icon:focus {
-  outline: none !important;
-  box-shadow: none !important;
-}
-
-.i-amphtml-story-share-icon:active::before {
-  background-color: #787878 !important;
+  outline: 2px solid #0389ff !important;
+  outline-offset: 2px !important;
 }
 
 .i-amphtml-story-share-icon[type=email] {

diff --git a/extensions/amp-story/1.0/amp-story-share.js b/extensions/amp-story/1.0/amp-story-share.js
@@ -98,20 +98,32 @@ const SHARE_ITEM_TEMPLATE = {
   attrs: dict({'class': 'i-amphtml-story-share-item'}),
 };
 
-/** @private @const {!./simple-template.ElementDef} */
-const LINK_SHARE_ITEM_TEMPLATE = {
-  tag: 'div',
-  attrs: dict({
-    'class': 'i-amphtml-story-share-icon i-amphtml-story-share-icon-link',
-  }),
-  children: [
-    {
-      tag: 'span',
-      attrs: dict({'class': 'i-amphtml-story-share-label'}),
-      localizedStringId: LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK,
-    },
-  ],
-};
+/**
+ * @private
+ * @param {!Element} el
+ * @return {./simple-template-ElementDef}
+ */
+function buildLinkShareItemTemplate(el) {
+  return {
+    tag: 'div',
+    attrs: dict({
+      'class': 'i-amphtml-story-share-icon i-amphtml-story-share-icon-link',
+      'tabindex': 0,
+      'role': 'button',
+      'aria-label': getLocalizationService(el).getLocalizedString(
+        LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK
+      ),
+    }),
+    children: [
+      {
+        tag: 'span',
+        attrs: dict({'class': 'i-amphtml-story-share-label'}),
+        localizedStringId:
+          LocalizedStringId.AMP_STORY_SHARING_PROVIDER_NAME_LINK,
+      },
+    ],
+  };
+}
 
 /** @private @const {string} */
 const SCROLLABLE_CLASSNAME = 'i-amphtml-story-share-widget-scrollable';
@@ -268,7 +280,7 @@ export class ShareWidget {
 
     const linkShareButton = renderAsElement(
       this.win.document,
-      LINK_SHARE_ITEM_TEMPLATE
+      buildLinkShareItemTemplate(this.storyEl)
     );
 
     this.add_(linkShareButton);
@@ -277,6 +289,14 @@ export class ShareWidget {
       e.preventDefault();
       this.copyUrlToClipboard_();
     });
+    listen(linkShareButton, 'keyup', (e) => {
+      const code = e.charCode || e.keyCode;
+      // Check if pressed Space or Enter to trigger button.
+      if (code === 32 || code === 13) {
+        e.preventDefault();
+        this.copyUrlToClipboard_();
+      }
+    });
   }
 
   /**

diff --git a/extensions/amp-story/1.0/amp-story-vertical.css b/extensions/amp-story/1.0/amp-story-vertical.css
@@ -62,6 +62,10 @@ amp-story[i-amphtml-vertical].i-amphtml-element amp-story-page.i-amphtml-element
   overflow: visible !important;
 }
 
+[i-amphtml-vertical] .amp-story-draggable-drawer-root {
+  visibility: visible !important;
+}
+
 [i-amphtml-vertical].i-amphtml-story-bookend-active amp-story-page[active]::after {
   content: none !important;
 }