Discource-C/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-04 18:29:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

A11Y: add keyboard support to youtube embeds ()

Browse Source
This commit is contained in:
Penar Musaraj 2022-10-21 16:32:53 -04:00 committed by GitHub
parent 0a33c507d9
commit 595fc3ef22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 2 deletions
plugins/lazy-yt/assets
javascripts/lib
lazyYT.js
stylesheets
lazyYT.css

8
plugins/lazy-yt/assets/javascripts/lib/lazyYT.js

@ -51,7 +51,7 @@ export default function initLazyYt($) {
// //
// This HTML will be placed inside 'lazyYT' container // 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) // Play button from YouTube (exactly as it is in YouTube)
innerHtml.push('<div class="ytp-large-play-button"'); innerHtml.push('<div class="ytp-large-play-button"');
@ -135,7 +135,11 @@ export default function initLazyYt($) {
$thumb = $el $thumb = $el
.find(".ytp-thumbnail") .find(".ytp-thumbnail")
.addClass("lazyYT-image-loaded") .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(); e.preventDefault();
if ( if (

1
plugins/lazy-yt/assets/stylesheets/lazyYT.css

@ -113,6 +113,7 @@
} }
.lazyYT-image-loaded:hover .ytp-large-play-button-svg, .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 { .ytp-large-play-button:focus .ytp-large-play-button-svg {
opacity: 1; opacity: 1;
fill: #cc181e; fill: #cc181e;