Skip to content

Commit

Permalink
♿ [amp-story] Allow screen reader users to pause auto-advancing stori…
Browse files Browse the repository at this point in the history 
…es (#37582)

* update example

* make pause work

* cleanup whitespace

* new selector

* remove whitespace
  • Loading branch information
@calebcordry
calebcordry committed Feb 11, 2022
1 parent 725f474 commit d0bf1b6
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 143 deletions.
234 changes: 101 additions & 133 deletions examples/amp-story/doubleclick.html
View file
@@ -1,201 +1,169 @@
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<script async custom-element="amp-story-auto-ads" src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script>
<title>My Story</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="helloworld.html">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
body {
font-family: 'Roboto', sans-serif;
}
amp-story-page {
background: white;
}
h1 {
font-size: 2.875em;
font-weight: normal;
line-height: 1.174;
text-transform: uppercase;
}
</style>

<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<script async custom-element="amp-story-auto-ads" src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="amp-story.amp.html">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<link href="https://fonts.googleapis.com/css?family=Lilita+One&display=swap" rel="stylesheet">
<style amp-custom>
amp-story-page {
background: slateblue;
}

.container {
justify-content: center;
align-content: center;
}

.num {
text-align: center;
color: white;
font-size: 300px;
font-family: 'Lilita One', cursive;
}
</style>
</head>

<body>
<amp-story
title="Amp-story-doubleclick"
publisher="The AMP Team"
publisher-logo-src="https://example.com/logo/1x1.png"
poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
poster-square-src="https://example.com/my-story/poster/1x1.jpg"
poster-landscape-src="https://example.com/my-story/poster/4x3.jpg"
standalone>

<amp-story-auto-ads>
<script type="application/json">
{
"ad-attributes": {
"type": "doubleclick",
"data-slot": "/30497360/a4a/amp_story_dfp_example"
<amp-story standalone supports-landscape>
<amp-story-auto-ads>
<script type="application/json">
{
"ad-attributes": {
"type": "doubleclick",
"data-slot": "/30497360/a4a/amp_story_dfp_example"
}
}
}
</script>
</amp-story-auto-ads>
</script>

</amp-story-auto-ads>

<amp-story-page id="cover">
<amp-story-grid-layer template="vertical">
<h1>Ads served from doubleclick</h1>
<p>This is the cover page.</p>
<amp-story-page id="page-1">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">1</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page-2" auto-advance-after="4s">
<amp-story-grid-layer template="vertical">
<h1>Auto advance page</h1>
<p>This page has auto-advance enabled</p>
<amp-story-page id="page-2">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">2</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page-3" auto-advance-after="vid1">
<amp-story-grid-layer template="vertical">
<h1>Short version of video</h1>
<amp-video
id="vid1"
src="../../examples/av/ForBiggerJoyrides-short.mp4"
width="720"
height="405"
layout="responsive"
controls>
</amp-video>
<amp-story-page id="page-3">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">3</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page-4" auto-advance-after="vid2">
<amp-story-grid-layer template="vertical">
<h1>Full length video</h1>
<amp-video
id="vid2"
src="../../examples/av/ForBiggerJoyrides.mp4"
width="720"
height="405"
layout="responsive"
controls>
</amp-video>
<amp-story-page id="page-4">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">4</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page-5" auto-advance-after="aud1">
<amp-story-grid-layer template="vertical">
<h1>Audio</h1>
<amp-audio
id="aud1"
src="https://storage.googleapis.com/media-session/sintel/snow-fight.mp3"
artwork="https://storage.googleapis.com/media-session/sintel/artwork-512.png"
title="Snow Fight"
album="Jan Morgenstern"
artist="Sintel"
height="50"
width="auto"
controls>
</amp-audio>
<amp-story-page id="page-5">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">5</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="six">
<amp-story-grid-layer template="vertical">
<h1>six Page</h1>
<amp-story-page id="page-6">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">6</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="seven">
<amp-story-grid-layer template="vertical">
<h1>seven Page</h1>
<amp-story-page id="page-7">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">7</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="eight">
<amp-story-grid-layer template="vertical">
<h1>eight Page</h1>
<amp-story-page id="page-8">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">8</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="nine">
<amp-story-grid-layer template="vertical">
<h1>nine Page</h1>
<amp-story-page id="page-9">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">9</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="ten">
<amp-story-grid-layer template="vertical">
<h1>ten Page</h1>
<amp-story-page id="page-10">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">10</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="eleven">
<amp-story-grid-layer template="vertical">
<h1>eleven Page</h1>
<amp-story-page id="page-11">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">11</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="twelve">
<amp-story-grid-layer template="vertical">
<h1>twelve Page</h1>
<amp-story-page id="page-12">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">12</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="thirteen">
<amp-story-grid-layer template="vertical">
<h1>thirteen Page</h1>
<amp-story-page id="page-13">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">13</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="fourteen">
<amp-story-grid-layer template="vertical">
<h1>fourteen Page</h1>
<amp-story-page id="page-14">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">14</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="fifteen">
<amp-story-grid-layer template="vertical">
<h1>fifteen Page</h1>
<amp-story-page id="page-15">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">15</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="sixteen">
<amp-story-grid-layer template="vertical">
<h1>sixteen Page</h1>
<amp-story-page id="page-16">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">16</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="seventeen">
<amp-story-grid-layer template="vertical">
<h1>seventeen Page</h1>
<amp-story-page id="page-17">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">17</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="eighteen">
<amp-story-grid-layer template="vertical">
<h1>eighteen Page</h1>
<amp-story-page id="page-18">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">18</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="nineteen">
<amp-story-grid-layer template="vertical">
<h1>nineteen Page</h1>
<amp-story-page id="page-19">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">19</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="twenty">
<amp-story-grid-layer template="vertical">
<h1>twenty Page</h1>
<amp-story-page id="page-20">
<amp-story-grid-layer class="container" template="vertical">
<p class="num">20</p>
</amp-story-grid-layer>
</amp-story-page>

</amp-story>
</body>
</html>

</html>
22 changes: 12 additions & 10 deletions extensions/amp-story/1.0/amp-story-system-layer.css
View file
Expand Up @@ -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,
Expand All @@ -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;
}

Expand All @@ -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;
Expand Down

0 comments on commit d0bf1b6

Please sign in to comment.