From 626637a1e3baf7db5d46b17b58d46457f0610317 Mon Sep 17 00:00:00 2001
From: Philip Bell <philip.hunter.bell@gmail.com>
Date: Wed, 24 Feb 2021 17:09:48 -0500
Subject: [PATCH] =?UTF-8?q?[ampproject/amphtml]=20=E2=99=BF=20[Story=20a11?=
 =?UTF-8?q?y]=20Pagination=20buttons=20alt=20text=20(#32861)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Pagination buttons alt text.

* Update comment

* clean up deps

* Remove unnecessary css

* Handle RTL.
---
 .../amp-story/1.0/pagination-buttons.css      | 11 +++--
 .../amp-story/1.0/pagination-buttons.js       | 40 ++++++++++---------
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/extensions/amp-story/1.0/pagination-buttons.css b/extensions/amp-story/1.0/pagination-buttons.css
index 99edd2632187..399d5ee7292e 100644
--- a/extensions/amp-story/1.0/pagination-buttons.css
+++ b/extensions/amp-story/1.0/pagination-buttons.css
@@ -59,9 +59,14 @@ amp-story:not([desktop]) .i-amphtml-story-button-container {
   pointer-events: none !important;
 }
 
-/* Navigation buttons. These are only displayed on desktop. */
-.i-amphtml-story-button-move {
-  display: none !important;
+/* Navigation button element. Visibly hidden on mobile but focusable by screen readers. */
+amp-story:not([desktop]) .i-amphtml-story-button-move,
+[dir=rtl] amp-story:not([desktop]) .i-amphtml-story-button-move {
+  width: 100% !important;
+  height: 100% !important;
+  border: none !important;
+  background: none !important;
+  padding: 0 !important;
 }
 
 [desktop] .i-amphtml-story-button-move {
diff --git a/extensions/amp-story/1.0/pagination-buttons.js b/extensions/amp-story/1.0/pagination-buttons.js
index 0f4eb9788cc7..ae095e13ca89 100644
--- a/extensions/amp-story/1.0/pagination-buttons.js
+++ b/extensions/amp-story/1.0/pagination-buttons.js
@@ -23,9 +23,9 @@ import {AdvancementMode} from './story-analytics';
 import {CommonSignals} from '../../../src/common-signals';
 import {EventType, dispatch} from './events';
 import {Services} from '../../../src/services';
-import {devAssert} from '../../../src/log';
-import {dict} from './../../../src/utils/object';
-import {renderAsElement} from './simple-template';
+import {dev, devAssert} from '../../../src/log';
+
+import {htmlFor} from '../../../src/static-template';
 
 /** @struct @typedef {{className: string, triggers: (string|undefined)}} */
 let ButtonState_1_0_Def; // eslint-disable-line google-camelcase/google-camelcase
@@ -68,17 +68,15 @@ const ForwardButtonStates = {
   },
 };
 
-/** @private @const {!./simple-template.ElementDef} */
-const BUTTON = {
-  tag: 'div',
-  attrs: dict({'class': 'i-amphtml-story-button-container', 'role': 'button'}),
-  children: [
-    {
-      tag: 'button',
-      attrs: dict({'class': 'i-amphtml-story-button-move'}),
-    },
-  ],
-};
+/**
+ * @param {!Element} element
+ * @return {!Element}
+ */
+const buildPaginationButton = (element) =>
+  htmlFor(element)`
+      <div class="i-amphtml-story-button-container">
+        <button class="i-amphtml-story-button-move"></button>
+      </div>`;
 
 /**
  * @param {!Element} hoverEl
@@ -109,12 +107,16 @@ class PaginationButton {
     this.state_ = initialState;
 
     /** @public @const {!Element} */
-    this.element = renderAsElement(doc, BUTTON);
+    this.element = buildPaginationButton(doc);
+
+    /** @private @const {!Element} */
+    this.buttonElement_ = dev().assertElement(
+      this.element.querySelector('button')
+    );
 
     this.element.classList.add(initialState.className);
     initialState.label &&
-      this.element.setAttribute('aria-label', initialState.label);
-
+      this.buttonElement_.setAttribute('aria-label', initialState.label);
     this.element.addEventListener('click', (e) => this.onClick_(e));
 
     /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
@@ -132,8 +134,8 @@ class PaginationButton {
     this.element.classList.remove(this.state_.className);
     this.element.classList.add(state.className);
     state.label
-      ? this.element.setAttribute('aria-label', state.label)
-      : this.element.removeAttribute('aria-label');
+      ? this.buttonElement_.setAttribute('aria-label', state.label)
+      : this.buttonElement_.removeAttribute('aria-label');
 
     this.state_ = state;
   }