Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

A11Y: add keyboard support to youtube embeds (#18710)

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 (

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

@ -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;