Better accessibility for youtube links. (#7240)

dart-lang · Dec 4, 2023 · a6a52e0 · a6a52e0
1 parent a963fb3
commit a6a52e0
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/app/lib/frontend/templates/views/landing/pow_video_list.dart b/app/lib/frontend/templates/views/landing/pow_video_list.dart
@@ -34,21 +34,19 @@ d.Node videoListNode(List<PkgOfWeekVideo> videos) {
               children: [
                 d.img(
                   classes: ['pow-video-overlay-img-active'],
-                  image: d.Image(
+                  image: d.Image.decorative(
                     src: staticUrls
                         .getAssetUrl('/static/img/youtube-play-red.png'),
-                    alt: 'youtube video play icon - active',
                     width: 76,
                     height: 53,
                   ),
                   lazy: true,
                 ),
                 d.img(
                   classes: ['pow-video-overlay-img-inactive'],
-                  image: d.Image(
+                  image: d.Image.decorative(
                     src: staticUrls
                         .getAssetUrl('/static/img/youtube-play-black.png'),
-                    alt: 'youtube video play icon - inactive',
                     width: 76,
                     height: 53,
                   ),

diff --git a/app/test/frontend/golden/landing_page.html b/app/test/frontend/golden/landing_page.html
@@ -188,8 +188,8 @@ <h1 class="home-block-title">Package of the Week</h1>
               <a href="https://youtube.com/watch?v=video-id&amp;list=PLjxrf2q8roU1quF6ny8oFHJ2gBdrYN_AK" rel="noopener" target="_blank" title="POW description" data-ga-click-event="package-of-the-week-video">
                 <img class="pow-video-thumbnail" src="http://youtube.com/image/thumbnail?i=123&amp;s=4" alt="POW Title" width="260" height="195" loading="lazy"/>
                 <div class="pow-video-overlay">
-                  <img class="pow-video-overlay-img-active" src="/static/hash-%%etag%%/img/youtube-play-red.png" alt="youtube video play icon - active" width="76" height="53" loading="lazy"/>
-                  <img class="pow-video-overlay-img-inactive" src="/static/hash-%%etag%%/img/youtube-play-black.png" alt="youtube video play icon - inactive" width="76" height="53" loading="lazy"/>
+                  <img class="pow-video-overlay-img-active" src="/static/hash-%%etag%%/img/youtube-play-red.png" alt="" width="76" height="53" loading="lazy" role="presentation"/>
+                  <img class="pow-video-overlay-img-inactive" src="/static/hash-%%etag%%/img/youtube-play-black.png" alt="" width="76" height="53" loading="lazy" role="presentation"/>
                 </div>
               </a>
             </div>

diff --git a/pkg/web_css/lib/src/_home.scss b/pkg/web_css/lib/src/_home.scss
@@ -281,7 +281,8 @@
     text-align: center;
     position: relative;
 
-    &:hover {
+    &:hover,
+    &:focus-within {
       > a { opacity: 1; } // Overrides default a:hover.
       .pow-video-overlay-img-active { display: inline-block; }
       .pow-video-overlay-img-inactive { display: none; }