From a6a52e01735b3db76233534d21b692304473f3a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Istv=C3=A1n=20So=C3=B3s?= <isoos@users.noreply.github.com>
Date: Mon, 4 Dec 2023 13:00:46 +0100
Subject: [PATCH] Better accessibility for youtube links. (#7240)

---
 .../frontend/templates/views/landing/pow_video_list.dart    | 6 ++----
 app/test/frontend/golden/landing_page.html                  | 4 ++--
 pkg/web_css/lib/src/_home.scss                              | 3 ++-
 3 files changed, 6 insertions(+), 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
index 2655ba17b..6570c0bd7 100644
--- a/app/lib/frontend/templates/views/landing/pow_video_list.dart
+++ b/app/lib/frontend/templates/views/landing/pow_video_list.dart
@@ -34,10 +34,9 @@ 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,
                   ),
@@ -45,10 +44,9 @@ d.Node videoListNode(List<PkgOfWeekVideo> videos) {
                 ),
                 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
index 1c06c922a..5d91c1c4a 100644
--- 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
index 2826b8fb1..c9a885678 100644
--- 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; }