From d0bf1b66eb0c402d10c74504242caa1a07dd9626 Mon Sep 17 00:00:00 2001 From: Caleb Cordry Date: Fri, 11 Feb 2022 09:37:31 -0800 Subject: [PATCH] =?UTF-8?q?=E2=99=BF=20[amp-story]=20Allow=20screen=20read?= =?UTF-8?q?er=20users=20to=20pause=20auto-advancing=20stories=20(#37582)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * update example * make pause work * cleanup whitespace * new selector * remove whitespace --- examples/amp-story/doubleclick.html | 234 ++++++++---------- .../amp-story/1.0/amp-story-system-layer.css | 22 +- 2 files changed, 113 insertions(+), 143 deletions(-) diff --git a/examples/amp-story/doubleclick.html b/examples/amp-story/doubleclick.html index a3558801d3e3..5359136e88b0 100644 --- a/examples/amp-story/doubleclick.html +++ b/examples/amp-story/doubleclick.html @@ -1,201 +1,169 @@ - - - - - - - - My Story - - - - + + + + + + + + + + + - - - - - + + + - - -

Ads served from doubleclick

-

This is the cover page.

+ + +

1

 - - -

Auto advance page

-

This page has auto-advance enabled

+ + +

2

 - - -

Short version of video

- - + + +

3

 - - -

Full length video

- - + + +

4

 - - -

Audio

- - + + +

5

 - - -

six Page

+ + +

6

 - - -

seven Page

+ + +

7

 - - -

eight Page

+ + +

8

 - - -

nine Page

+ + +

9

 - - -

ten Page

+ + +

10

 - - -

eleven Page

+ + +

11

 - - -

twelve Page

+ + +

12

 - - -

thirteen Page

+ + +

13

 - - -

fourteen Page

+ + +

14

 - - -

fifteen Page

+ + +

15

 - - -

sixteen Page

+ + +

16

 - - -

seventeen Page

+ + +

17

 - - -

eighteen Page

+ + +

18

 - - -

nineteen Page

+ + +

19

 - - -

twenty Page

+ + +

20

 + - + + \ No newline at end of file diff --git a/extensions/amp-story/1.0/amp-story-system-layer.css b/extensions/amp-story/1.0/amp-story-system-layer.css index 286f10f47d4d..a81963857071 100644 --- a/extensions/amp-story/1.0/amp-story-system-layer.css +++ b/extensions/amp-story/1.0/amp-story-system-layer.css @@ -225,7 +225,6 @@ .i-amphtml-story-mute-audio-control, .i-amphtml-story-unmute-audio-control, -.i-amphtml-paused-display, .i-amphtml-story-pause-control, .i-amphtml-story-play-control, .i-amphtml-story-mute-text, @@ -235,13 +234,20 @@ display: none !important; } -[i-amphtml-current-page-has-audio]:not([muted]) .i-amphtml-story-mute-audio-control, -[i-amphtml-current-page-has-audio][muted] .i-amphtml-story-unmute-audio-control { - display: block !important; +/* + Visible to screen readers only. Screen readers will set :focus on iOS but not android, + therefore on android the button remains hidden but interactable. +*/ +.i-amphtml-story-system-layer:not([desktop]):not(.i-amphtml-story-desktop-one-panel):not(.amp-mode-keyboard-active) + .i-amphtml-paused-display + button:not(:focus) { + width: 0px !important; + opacity: 0 !important; + pointer-events: none !important; } -[desktop] .i-amphtml-paused-display, -.i-amphtml-story-desktop-one-panel .i-amphtml-paused-display { +[i-amphtml-current-page-has-audio]:not([muted]) .i-amphtml-story-mute-audio-control, +[i-amphtml-current-page-has-audio][muted] .i-amphtml-story-unmute-audio-control { display: block !important; } @@ -254,10 +260,6 @@ display: block !important; } -.amp-mode-keyboard-active:not([desktop]) .i-amphtml-paused-display { - display: block !important; -} - .i-amphtml-story-ui-no-buttons .i-amphtml-story-button, .i-amphtml-story-ui-no-buttons .i-amphtml-story-system-layer-buttons { visibility: hidden !important;