♻️ Remove role button from buttons (#32252)

* Remove role button from buttons * Update examples/amp-consent/cmp-vendors.amp.html Co-authored-by: Caroline Liu <10456171+caroqliu@users.noreply.github.com> * Missed one in amp-story-page * two more files were missed Co-authored-by: Caroline Liu <10456171+caroqliu@users.noreply.github.com>
ampproject · Jan 27, 2021 · 2f47360 · 2f47360
1 parent b3c7639
commit 2f47360
Show file tree

Hide file tree

Showing 48 changed files with 150 additions and 154 deletions.
diff --git a/examples/adsense.amp.html b/examples/adsense.amp.html
@@ -58,7 +58,7 @@
       id="amp-user-notification">
     This site uses cookies to personalize content.
     <a href="#learn-more">Learn more.</a>
-    <button on="tap:amp-user-notification.dismiss" role="button" tabindex="0">I accept</button>
+    <button on="tap:amp-user-notification.dismiss" tabindex="0">I accept</button>
   </amp-user-notification>
 
   <h2>AdSense</h2>

diff --git a/examples/amp-ad-exit.amp.html b/examples/amp-ad-exit.amp.html
@@ -133,7 +133,7 @@ <h1 on="tap:exit-api.exit(target='target1')" role="button" tabindex="1">amp-ad-e
     <div class="content" role="link" tabindex="1" on="tap:exit-api.exit(target='target1', _elem='slide1')">product 1</div>
     <div class="content" role="link" tabindex="1" on="tap:exit-api.exit(target='target2', _elem='slide2')">product 2</div>
   </amp-carousel>
-  <button id="cta" role="button" tabindex="1"
+  <button id="cta" tabindex="1"
       on="tap:exit-api.exit(variable='current', default='target1', _elem='cta')">
     Buy
     <span>

diff --git a/examples/amp-consent/amp-consent-3p-postmessage.html b/examples/amp-consent/amp-consent-3p-postmessage.html
@@ -156,19 +156,19 @@ <h3>Image that is NOT blocked by consent</h3>
       </script>
       <div id="ui1">
         Please Accept to load image.
-        <button on="tap:ABC.accept" role="button">Accept</button>
-        <button on="tap:ABC.reject" role="button">Reject</button>
-        <button on="tap:ABC.dismiss" role="button">Dismiss</button>
+        <button on="tap:ABC.accept">Accept</button>
+        <button on="tap:ABC.reject">Reject</button>
+        <button on="tap:ABC.dismiss">Dismiss</button>
       </div>
       <div id="ui2">
         Please Accept to load image.
-        <button on="tap:ABC.accept" role="button">Accept</button>
-        <button on="tap:ABC.reject" role="button">Reject</button>
-        <button on="tap:ABC.dismiss" role="button">Dismiss</button>
+        <button on="tap:ABC.accept">Accept</button>
+        <button on="tap:ABC.reject">Reject</button>
+        <button on="tap:ABC.dismiss">Dismiss</button>
       </div>
       <div id="postPromptUI">
         Post Prompt UI
-        <button on="tap:ABC.prompt(consent=_ping_)" role="button">Manage</button>
+        <button on="tap:ABC.prompt(consent=_ping_)">Manage</button>
       </div>
     </amp-consent>
   </body>

diff --git a/examples/amp-consent/amp-consent-amp-ad.amp.html b/examples/amp-consent/amp-consent-amp-ad.amp.html
@@ -37,7 +37,7 @@
     </script>
     <div id="postPromptUI">
       Post Prompt UI
-      <button on="tap:ABC.prompt(consent=_ping_)" role="button">Manage</button>
+      <button on="tap:ABC.prompt(consent=_ping_)">Manage</button>
     </div>
   </amp-consent>
   <!-- End _ping_ example -->

diff --git a/examples/amp-consent/amp-consent-client.html b/examples/amp-consent/amp-consent-client.html
@@ -183,13 +183,13 @@ <h3>Image that is NOT blocked by consent</h3>
     }</script>
     <div id="ui1">
         CA: Can I load the image??
-        <button on="tap:ABC.accept" role="button">Accept</button>
-        <button on="tap:ABC.reject" role="button">Reject</button>
-        <button on="tap:ABC.dismiss" role="button">Dismiss</button>
+        <button on="tap:ABC.accept">Accept</button>
+        <button on="tap:ABC.reject">Reject</button>
+        <button on="tap:ABC.dismiss">Dismiss</button>
       </div>
       <div id="postPromptUI">
         Post Prompt UI
-        <button on="tap:ABC.prompt" role="button">Manage</button>
+        <button on="tap:ABC.prompt">Manage</button>
       </div>
   </amp-consent>
 
@@ -206,7 +206,7 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
 
       <div>
         Revoke consent
-        <button class="button" on="tap:ABC.prompt" role="button">Manage</button>
+        <button class="button" on="tap:ABC.prompt">Manage</button>
       </div>
 
       <div class="author">
@@ -255,7 +255,7 @@ <h1>_ping_ Ad Blocked by meta tags</h1>
         </p>
       </div>
     </div>
-    <button on="tap:ABC.prompt" role="button">Manage Consent</button>
+    <button on="tap:ABC.prompt">Manage Consent</button>
   </article>
 </main>
 

diff --git a/examples/amp-consent/amp-consent-cmp.html b/examples/amp-consent/amp-consent-cmp.html
@@ -270,7 +270,7 @@ <h3>Image that is NOT blocked by consent</h3>
       </script>
       <div id="postPromptUI">
         Post Prompt UI
-        <button on="tap:ABC.prompt(consent=_ping_)" role="button">Manage</button>
+        <button on="tap:ABC.prompt(consent=_ping_)">Manage</button>
       </div>
     </amp-consent>
     <article>
@@ -286,15 +286,15 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
 
         <div>
           Revoke consent ABC and DEF
-          <button class="button" on="tap:ABC.prompt(consent=ABC),ABC.prompt(consent=DEF)" role="button">Manage</button>
+          <button class="button" on="tap:ABC.prompt(consent=ABC),ABC.prompt(consent=DEF)">Manage</button>
         </div>
         <div>
           Revoke error consent doesn't exsit
-          <button class="button" on="tap:ABC.prompt(consent=ABCd)" role="button">Manage</button>
+          <button class="button" on="tap:ABC.prompt(consent=ABCd)">Manage</button>
         </div>
         <div>
           Only revoke DEF
-          <button class="button" on="tap:ABC.prompt(consent=DEF)" role="button">Manage</button>
+          <button class="button" on="tap:ABC.prompt(consent=DEF)">Manage</button>
         </div>
 
         <div class="author">

diff --git a/examples/amp-consent/amp-consent-geo.html b/examples/amp-consent/amp-consent-geo.html
@@ -222,9 +222,9 @@ <h3>Image that is NOT blocked by consent</h3>
     }</script>
     <div id="ui1">
       Can I load the image??
-      <button on="tap:ABC.accept" role="button">Accept</button>
-      <button on="tap:ABC.reject" role="button">Reject</button>
-      <button on="tap:ABC.dismiss" role="button">Dismiss</button>
+      <button on="tap:ABC.accept">Accept</button>
+      <button on="tap:ABC.reject">Reject</button>
+      <button on="tap:ABC.dismiss">Dismiss</button>
     </div>
     <div id="ui2">
       Can I load the image??
@@ -238,7 +238,7 @@ <h3>Image that is NOT blocked by consent</h3>
     </div>
     <div id="postPromptUI">
       Post Prompt UI
-      <button on="tap:ABC.prompt" role="button">Manage</button>
+      <button on="tap:ABC.prompt">Manage</button>
     </div>
   </amp-consent>
   <article>
@@ -255,7 +255,7 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
 
       <div>
         Revoke consent
-        <button class="button" on="tap:ABC.prompt" role="button">Manage</button>
+        <button class="button" on="tap:ABC.prompt">Manage</button>
       </div>
 
       <div class="author">

diff --git a/examples/amp-consent/amp-consent-iframe.amp.html b/examples/amp-consent/amp-consent-iframe.amp.html
@@ -89,7 +89,7 @@ <h2>Iframe never blocked</h2>
         </script>
         <div id="postPromptUI">
           Post Prompt UI
-          <button on="tap:ABC.prompt(consent=_ping_)" role="button">Manage</button>
+          <button on="tap:ABC.prompt(consent=_ping_)">Manage</button>
         </div>
       </amp-consent>
       <!-- End _ping_ example -->

diff --git a/examples/amp-consent/amp-consent-server.html b/examples/amp-consent/amp-consent-server.html
@@ -193,7 +193,7 @@ <h1 itemprop="headline">Lorem Ipsum</h1>
 
       <div>
         Revoke consent
-        <button class="button" on="tap:ABC.prompt" role="button">Manage</button>
+        <button class="button" on="tap:ABC.prompt">Manage</button>
       </div>
 
       <div class="author">

diff --git a/examples/amp-consent/cmp-vendors.amp.html b/examples/amp-consent/cmp-vendors.amp.html
@@ -142,7 +142,7 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="postPromptUI">
           Post Prompt UI
-          <button on="tap:ABC.prompt(consent=_ping_)" role="button">Manage</button>
+          <button on="tap:ABC.prompt(consent=_ping_)">Manage</button>
         </div>
       </amp-consent>
       <!-- End _ping_ example -->
@@ -159,7 +159,7 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="postPromptUI">
           Post Prompt UI
-          <button on="tap:ABC.prompt(consent=appconsent)" role="button">Manage</button>
+          <button on="tap:ABC.prompt(consent=appconsent)">Manage</button>
         </div>
       </amp-consent>
       <!-- End appconsent example -->
@@ -175,7 +175,7 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="postPromptUI">
           Post Prompt UI
-          <button on="tap:consent.prompt(consent=ConsentManager)" role="button">Manage</button>
+          <button on="tap:consent.prompt(consent=ConsentManager)">Manage</button>
         </div>
       </amp-consent>
       <!-- End appconsent example -->
@@ -203,7 +203,7 @@ <h3>Image that is NOT blocked by consent</h3>
           </script>
           <div id="postPromptUI">
             Post Prompt UI
-            <button on="tap:didomi.prompt(consent=didomi)" role="button">Manage</button>
+            <button on="tap:didomi.prompt(consent=didomi)">Manage</button>
           </div>
         </amp-consent>
         <!-- End didomi example -->
@@ -218,7 +218,7 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="iubendaPostPromptUI">
           Post Prompt UI
-          <button on="tap:iubenda.prompt(consent=iubenda)" role="button">Manage</button>
+          <button on="tap:iubenda.prompt(consent=iubenda)">Manage</button>
         </div>
       </amp-consent>
       <!-- End iubenda example -->
@@ -260,7 +260,7 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="postPromptUI">
           Post Prompt UI
-          <button on="tap:marfeelConsent.prompt(consent=Marfeel)" role="button">Manage</button>
+          <button on="tap:marfeelConsent.prompt(consent=Marfeel)">Manage</button>
         </div>
       </amp-consent>
       <!-- End Marfeel example -->
@@ -280,7 +280,7 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="custom-prompt-ui">
           Post Prompt UI
-          <button on="tap:ogury.prompt(consent=Ogury)" role="button">
+          <button on="tap:ogury.prompt(consent=Ogury)">
             Privacy Settings
           </button>
         </div>
@@ -301,7 +301,7 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="onetrust-consent-prompt-ui">
           Post Prompt UI
-          <button on="tap:consent.prompt(consent=onetrust)" role="button">Privacy Settings</button>
+          <button on="tap:consent.prompt(consent=onetrust)">Privacy Settings</button>
         </div>
       </amp-consent>
       <!-- End OneTrust example -->
@@ -316,7 +316,7 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="opencmp-consent-prompt-ui">
           Post Prompt UI
-          <button on="tap:consent.prompt(consent=opencmp)" role="button">Privacy Settings</button>
+          <button on="tap:consent.prompt(consent=opencmp)">Privacy Settings</button>
         </div>
       </amp-consent>
       <!-- End opencmp example -->
@@ -334,7 +334,7 @@ <h3>Image that is NOT blocked by consent</h3>
               }
             </script>
         <div id="pubtech-post-prompt">
-          <button on="tap:pubtech.prompt(consent=pubtech)" role="button">Privacy settings</button>
+          <button on="tap:pubtech.prompt(consent=pubtech)">Privacy settings</button>
         </div>
       </amp-consent>
       <!-- End Pubtech example -->
@@ -352,7 +352,7 @@ <h3>Image that is NOT blocked by consent</h3>
             }
           </script>
           <div id="quantcast-post-prompt">
-            <button on="tap:conset.prompt(consent=quantcast)" role="button">Privacy settings</button>
+            <button on="tap:consent.prompt(consent=quantcast)">Privacy settings</button>
           </div>
       </amp-consent>
       <!-- End Quantcast example -->
@@ -373,7 +373,7 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="promptConsentUI">
           Post Prompt UI
-          <button on="tap:consent.prompt(consent=sirdata)" role="button">Privacy settings</button>
+          <button on="tap:consent.prompt(consent=sirdata)">Privacy settings</button>
         </div>
       </amp-consent>
       <!-- End sirdata example -->
@@ -398,7 +398,7 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="my-consent-prompt-ui">
           Post Prompt UI
-          <button on="tap:consent.prompt(consent=SourcePoint)" role="button">Privacy Settings</button>
+          <button on="tap:consent.prompt(consent=SourcePoint)">Privacy Settings</button>
         </div>
       </amp-consent>
       <!-- End SourcePoint example -->
@@ -436,7 +436,7 @@ <h3>Image that is NOT blocked by consent</h3>
         </script>
         <div id="my-consent-prompt-ui">
           Post Prompt UI
-          <button on="tap:consent.prompt(consent=Usercentrics)" role="button">Privacy Settings</button>
+          <button on="tap:consent.prompt(consent=Usercentrics)">Privacy Settings</button>
         </div>
       </amp-consent>
       <!-- End Usercentrics example -->

diff --git a/examples/experiment-1.0.amp.html b/examples/experiment-1.0.amp.html
@@ -108,7 +108,7 @@ <h1>Title TBD</h1>
       layout=nodisplay
       id="amp-user-notification">
     Dismiss this notification to see a background-color on the title on your next visit.
-    <button on="tap:amp-user-notification.dismiss" role="button">I accept</button>
+    <button on="tap:amp-user-notification.dismiss">I accept</button>
   </amp-user-notification>
 </body>
 </html>
diff --git a/examples/experiment.amp.html b/examples/experiment.amp.html
@@ -73,7 +73,7 @@ <h1>Background color is user sticky; text color may change on a refresh</h1>
       layout=nodisplay
       id="amp-user-notification">
     Dismiss this notification to see a border around title on your next visit.
-    <button on="tap:amp-user-notification.dismiss" role="button">I accept</button>
+    <button on="tap:amp-user-notification.dismiss">I accept</button>
   </amp-user-notification>
 </body>
 </html>
diff --git a/examples/gwd.amp.html b/examples/gwd.amp.html
@@ -100,18 +100,18 @@
   <!-- Demo animation controls. -->
   <p>
     Page1 animations:
-    <button on="tap:gwd-animation.play(id=page1)" role="button" tabindex="0">Play</button>
-    <button on="tap:gwd-animation.pause(id=page1)" role="button" tabindex="0">Pause</button>
-    <button on="tap:gwd-animation.togglePlay(id=page1)" role="button" tabindex="0">Toggle</button>
-    <button on="tap:gwd-animation.gotoAndPlay(id=page1, label=foo)" role="button" tabindex="0">
+    <button on="tap:gwd-animation.play(id=page1)" tabindex="0">Play</button>
+    <button on="tap:gwd-animation.pause(id=page1)" tabindex="0">Pause</button>
+    <button on="tap:gwd-animation.togglePlay(id=page1)" tabindex="0">Toggle</button>
+    <button on="tap:gwd-animation.gotoAndPlay(id=page1, label=foo)" tabindex="0">
       Play page from label
     </button>
   </p>
   <p>
     Page1 child animations:
-    <button on="tap:gwd-animation.play(id=child)" role="button" tabindex="0">Play</button>
-    <button on="tap:gwd-animation.pause(id=child)" role="button" tabindex="0">Pause</button>
-    <button on="tap:gwd-animation.togglePlay(id=child)" role="button" tabindex="0">Toggle</button>
+    <button on="tap:gwd-animation.play(id=child)" tabindex="0">Play</button>
+    <button on="tap:gwd-animation.pause(id=child)" tabindex="0">Pause</button>
+    <button on="tap:gwd-animation.togglePlay(id=child)" tabindex="0">Toggle</button>
   </p>
 
   <!-- Configure the animation runtime with handlers for the two timeline events. -->

diff --git a/examples/image-slider.amp.html b/examples/image-slider.amp.html
@@ -289,7 +289,6 @@ <h1>Hello World!</h1>
     </amp-lightbox>
     <button class="ampstart-btn caps m2"
       on="tap:my-lightbox"
-      role="button"
       tabindex="0">
       Open lightbox
     </button>

diff --git a/examples/sticky.ads.amp.html b/examples/sticky.ads.amp.html
@@ -214,7 +214,7 @@
           data-persist-dismissal="false">
     This notification should ALSO ALWAYS show.
     <a href="#learn-more">Learn more.</a>
-    <button on="tap:amp-user-notification6.dismiss" role="button" tabindex="5">Dismiss</button>
+    <button on="tap:amp-user-notification6.dismiss" tabindex="5">Dismiss</button>
   </amp-user-notification>