Skip to content

Commit

Permalink
Better accessibility for youtube links. (#7240)
Browse files Browse the repository at this point in the history
  • Loading branch information
isoos authored Dec 4, 2023
1 parent a963fb3 commit a6a52e0
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 7 deletions.
6 changes: 2 additions & 4 deletions app/lib/frontend/templates/views/landing/pow_video_list.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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,
),
Expand Down
4 changes: 2 additions & 2 deletions app/test/frontend/golden/landing_page.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion pkg/web_css/lib/src/_home.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand Down

0 comments on commit a6a52e0

Please sign in to comment.