From 595fc3ef224df86d06601972bd5a74dead8da925 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Fri, 21 Oct 2022 16:32:53 -0400
Subject: [PATCH] A11Y: add keyboard support to youtube embeds (#18710)

---
 plugins/lazy-yt/assets/javascripts/lib/lazyYT.js | 8 ++++++--
 plugins/lazy-yt/assets/stylesheets/lazyYT.css    | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/plugins/lazy-yt/assets/javascripts/lib/lazyYT.js b/plugins/lazy-yt/assets/javascripts/lib/lazyYT.js
index 643bfc7ade7..467515e4ee2 100644
--- a/plugins/lazy-yt/assets/javascripts/lib/lazyYT.js
+++ b/plugins/lazy-yt/assets/javascripts/lib/lazyYT.js
@@ -51,7 +51,7 @@ export default function initLazyYt($) {
     //
     // This HTML will be placed inside 'lazyYT' container
 
-    innerHtml.push('<div class="ytp-thumbnail">');
+    innerHtml.push('<div class="ytp-thumbnail" tabIndex="0">');
 
     // Play button from YouTube (exactly as it is in YouTube)
     innerHtml.push('<div class="ytp-large-play-button"');
@@ -135,7 +135,11 @@ export default function initLazyYt($) {
     $thumb = $el
       .find(".ytp-thumbnail")
       .addClass("lazyYT-image-loaded")
-      .on("click", function (e) {
+      .on("keypress click", function (e) {
+        // Only support Enter for keypress
+        if (e.type === "keypress" && e.keyCode !== 13) {
+          return;
+        }
         e.preventDefault();
 
         if (
diff --git a/plugins/lazy-yt/assets/stylesheets/lazyYT.css b/plugins/lazy-yt/assets/stylesheets/lazyYT.css
index 9a8e14e029b..848b57a11bd 100644
--- a/plugins/lazy-yt/assets/stylesheets/lazyYT.css
+++ b/plugins/lazy-yt/assets/stylesheets/lazyYT.css
@@ -113,6 +113,7 @@
 }
 
 .lazyYT-image-loaded:hover .ytp-large-play-button-svg,
+.lazyYT-image-loaded:focus .ytp-large-play-button-svg,
 .ytp-large-play-button:focus .ytp-large-play-button-svg {
   opacity: 1;
   fill: #cc181e;