8/UI/mejs-videoplayer keyboard focus ILIAS style 34185 (ILIAS-eLearni…

…ng#7791)
surlabs · Jul 19, 2024 · 6731612 · 6731612
1 parent e344a06
commit 6731612
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 0 deletions.
diff --git a/templates/default/delos.css b/templates/default/delos.css
@@ -16308,6 +16308,50 @@ span.bibl_text_inline_Emph {
   width: 100px;
   cursor: pointer;
 }
+.mejs__overlay-button:focus-visible,
+.mejs__container:focus-visible,
+.ilPlayerPreviewPlayButton:focus-visible,
+.mejs__time-total:focus-visible {
+  position: relative;
+  outline: 2px solid #FFFFFF;
+  outline-offset: 4px;
+}
+.mejs__overlay-button:focus-visible::after,
+.mejs__container:focus-visible::after,
+.ilPlayerPreviewPlayButton:focus-visible::after,
+.mejs__time-total:focus-visible::after {
+  content: " ";
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  border: 2px solid #FFFFFF;
+  outline: 3px solid #0078D7;
+}
+.mejs__overlay-button:active,
+.mejs__container:active,
+.ilPlayerPreviewPlayButton:active,
+.mejs__time-total:active,
+.mejs__overlay-button.engaged,
+.mejs__container.engaged,
+.ilPlayerPreviewPlayButton.engaged,
+.mejs__time-total.engaged {
+  outline: none;
+}
+.mejs__button button:focus-visible,
+.ilPageVideo button:focus-visible {
+  outline: none;
+  border: 3px solid #0078D7;
+  box-shadow: inset 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 2px #FFFFFF;
+  outline-offset: initial;
+}
+.mejs__button button::after,
+.ilPageVideo button::after,
+.mejs__button button:focus:focus-visible::after,
+.ilPageVideo button:focus:focus-visible::after {
+  content: none;
+}
 .ilPlayerPreviewOverlay:hover .ilPlayerPreviewPlayButton {
   background-position: 0 -100px;
 }

diff --git a/templates/default/less/Services/MediaObjects/delos.less b/templates/default/less/Services/MediaObjects/delos.less
@@ -51,6 +51,17 @@
 	cursor: pointer;
 }
 
+.mejs__overlay-button,
+.mejs__container,
+.ilPlayerPreviewPlayButton,
+.mejs__time-total {
+	.il-focus();
+}
+.mejs__button button,
+.ilPageVideo button {
+	.il-focus-border-only();
+}
+
 .ilPlayerPreviewOverlay:hover .ilPlayerPreviewPlayButton {
 	background-position: 0 -100px;
 }