keyboard support for screenshot carrousel (dart-lang#7333)

isoos · Jan 2, 2024 · 240ab3e · 240ab3e
1 parent a5b065c
commit 240ab3e
Show file tree

Hide file tree

Showing 37 changed files with 255 additions and 175 deletions.
diff --git a/app/lib/frontend/templates/views/pkg/screenshots.dart b/app/lib/frontend/templates/views/pkg/screenshots.dart
@@ -27,6 +27,7 @@ d.Node imageCarousel() {
       attributes: {
         'title': 'Next',
         'data-ga-click-event': 'screenshot-carousel-next-click',
+        'tabindex': '0',
       });
 
   final prev = material.floatingActionButton(
@@ -43,6 +44,7 @@ d.Node imageCarousel() {
       attributes: {
         'title': 'Previous',
         'data-ga-click-event': 'screenshot-carousel-prev-click',
+        'tabindex': '0',
       });
 
   final description =
@@ -81,6 +83,9 @@ d.Node screenshotThumbnailNode({
       image: d.Image(
           alt: 'screenshot', width: null, height: null, src: thumbnailUrl),
       title: 'View screenshots',
+      attributes: {
+        'tabindex': '0',
+      },
     ),
   ]);
 }
diff --git a/app/test/frontend/golden/my_packages.html b/app/test/frontend/golden/my_packages.html
@@ -330,12 +330,12 @@ <h3 class="packages-title">
                       </div>
                     </div>
                     <div id="-screenshot-carousel" class="carousel">
-                      <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click">
+                      <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
                         <div class="mdc-fab__ripple"></div>
                         <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
                       </fab>
                       <div id="-image-container" class="image-container"></div>
-                      <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click">
+                      <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
                         <div class="mdc-fab__ripple"></div>
                         <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
                       </fab>

diff --git a/app/test/frontend/golden/pkg_activity_log_page.html b/app/test/frontend/golden/pkg_activity_log_page.html
@@ -339,12 +339,12 @@ <h3 class="detail-lead-title">Metadata</h3>
           </div>
           <aside class="detail-info-box">
             <div id="-screenshot-carousel" class="carousel">
-              <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click">
+              <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
                 <div class="mdc-fab__ripple"></div>
                 <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
               </fab>
               <div id="-image-container" class="image-container"></div>
-              <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click">
+              <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
                 <div class="mdc-fab__ripple"></div>
                 <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
               </fab>
@@ -425,12 +425,12 @@ <h3 class="detail-metadata-title">
         </h3>
         <div class="detail-info-box">
           <div id="-screenshot-carousel" class="carousel">
-            <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click">
+            <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
               <div class="mdc-fab__ripple"></div>
               <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
             </fab>
             <div id="-image-container" class="image-container"></div>
-            <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click">
+            <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
               <div class="mdc-fab__ripple"></div>
               <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
             </fab>

diff --git a/app/test/frontend/golden/pkg_admin_page.html b/app/test/frontend/golden/pkg_admin_page.html
@@ -557,12 +557,12 @@ <h3>Restore Retracted Package Version</h3>
           </div>
           <aside class="detail-info-box">
             <div id="-screenshot-carousel" class="carousel">
-              <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click">
+              <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
                 <div class="mdc-fab__ripple"></div>
                 <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
               </fab>
               <div id="-image-container" class="image-container"></div>
-              <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click">
+              <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
                 <div class="mdc-fab__ripple"></div>
                 <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
               </fab>
@@ -643,12 +643,12 @@ <h3 class="detail-metadata-title">
         </h3>
         <div class="detail-info-box">
           <div id="-screenshot-carousel" class="carousel">
-            <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click">
+            <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
               <div class="mdc-fab__ripple"></div>
               <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
             </fab>
             <div id="-image-container" class="image-container"></div>
-            <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click">
+            <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
               <div class="mdc-fab__ripple"></div>
               <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
             </fab>

diff --git a/app/test/frontend/golden/pkg_changelog_page.html b/app/test/frontend/golden/pkg_changelog_page.html
@@ -225,12 +225,12 @@ <h2 class="changelog-version hash-header" id="120">
           </div>
           <aside class="detail-info-box">
             <div id="-screenshot-carousel" class="carousel">
-              <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click">
+              <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
                 <div class="mdc-fab__ripple"></div>
                 <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
               </fab>
               <div id="-image-container" class="image-container"></div>
-              <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click">
+              <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
                 <div class="mdc-fab__ripple"></div>
                 <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
               </fab>
@@ -312,12 +312,12 @@ <h3 class="detail-metadata-title">
         </h3>
         <div class="detail-info-box">
           <div id="-screenshot-carousel" class="carousel">
-            <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click">
+            <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
               <div class="mdc-fab__ripple"></div>
               <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
             </fab>
             <div id="-image-container" class="image-container"></div>
-            <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click">
+            <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
               <div class="mdc-fab__ripple"></div>
               <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
             </fab>

diff --git a/app/test/frontend/golden/pkg_example_page.html b/app/test/frontend/golden/pkg_example_page.html
@@ -222,12 +222,12 @@ <h3 class="detail-lead-title">Metadata</h3>
           </div>
           <aside class="detail-info-box">
             <div id="-screenshot-carousel" class="carousel">
-              <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click">
+              <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
                 <div class="mdc-fab__ripple"></div>
                 <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
               </fab>
               <div id="-image-container" class="image-container"></div>
-              <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click">
+              <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
                 <div class="mdc-fab__ripple"></div>
                 <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
               </fab>
@@ -309,12 +309,12 @@ <h3 class="detail-metadata-title">
         </h3>
         <div class="detail-info-box">
           <div id="-screenshot-carousel" class="carousel">
-            <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click">
+            <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
               <div class="mdc-fab__ripple"></div>
               <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
             </fab>
             <div id="-image-container" class="image-container"></div>
-            <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click">
+            <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
               <div class="mdc-fab__ripple"></div>
               <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
             </fab>

diff --git a/app/test/frontend/golden/pkg_index_page.html b/app/test/frontend/golden/pkg_index_page.html
@@ -576,12 +576,12 @@ <h3 class="packages-title">
               </div>
             </div>
             <div id="-screenshot-carousel" class="carousel">
-              <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click">
+              <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
                 <div class="mdc-fab__ripple"></div>
                 <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
               </fab>
               <div id="-image-container" class="image-container"></div>
-              <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click">
+              <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
                 <div class="mdc-fab__ripple"></div>
                 <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
               </fab>

diff --git a/app/test/frontend/golden/pkg_install_page.html b/app/test/frontend/golden/pkg_install_page.html
@@ -248,12 +248,12 @@ <h3>Import it</h3>
           </div>
           <aside class="detail-info-box">
             <div id="-screenshot-carousel" class="carousel">
-              <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click">
+              <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
                 <div class="mdc-fab__ripple"></div>
                 <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
               </fab>
               <div id="-image-container" class="image-container"></div>
-              <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click">
+              <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
                 <div class="mdc-fab__ripple"></div>
                 <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
               </fab>
@@ -335,12 +335,12 @@ <h3 class="detail-metadata-title">
         </h3>
         <div class="detail-info-box">
           <div id="-screenshot-carousel" class="carousel">
-            <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click">
+            <fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
               <div class="mdc-fab__ripple"></div>
               <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
             </fab>
             <div id="-image-container" class="image-container"></div>
-            <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click">
+            <fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
               <div class="mdc-fab__ripple"></div>
               <img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
             </fab>