fix: Contrast (Minimum) (WCAG SC 1.4.3)

cloudinary · Feb 12, 2025 · 0ce8c55 · 0ce8c55
1 parent d71e55d
commit 0ce8c55
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 13 deletions.
diff --git a/src/assets/styles/components/title-bar.scss b/src/assets/styles/components/title-bar.scss
@@ -16,6 +16,9 @@
   padding: clamp(1.3em, 4cqw, 2em);
   pointer-events: none;
   container-type: inline-size;
+  text-shadow: 0 0 0.5em var(--color-base);
+  color: var(--color-text);
+  background-image: linear-gradient(color-mix(in srgb, var(--color-base) 70%, transparent), transparent 100%);
 
   .vjs-title-bar-title {
     width: 100%;

diff --git a/src/plugins/chapters/chapters.scss b/src/plugins/chapters/chapters.scss
@@ -41,7 +41,9 @@
     transform: translateX(-50%);
     bottom: 2.7em;
     position: absolute;
-    text-shadow: 0 0 4px color-mix(in srgb, var(--color-base) 40%, transparent);
+    padding: 0 0.3em;
+    font-weight: bold;
+    text-shadow: 0 0 8px var(--color-base),  0 0 1px var(--color-base),  0 0 1px var(--color-base);
     &:not(:empty) ~ .vjs-vtt-thumbnail-display {
       bottom: 4em;
     }

diff --git a/src/plugins/colors/index.js b/src/plugins/colors/index.js
@@ -53,11 +53,6 @@ const playerColors = `
     color: rgba(--text-color, 0.3);
   }
 
-  .PLAYER-CLASS-PREFIX .vjs-title-bar {
-    color: --text-color;
-    background-image: linear-gradient(rgba(--base-color, 0.4), rgba(255, 255, 255, 0) 100%);
-  }
-
   .PLAYER-CLASS-PREFIX .vjs-recommendations-overlay {
     color: --text-color;
     background-color: rgba(--base-color, 0.4);

diff --git a/src/plugins/playlist/ui/playlist.scss b/src/plugins/playlist/ui/playlist.scss
@@ -77,7 +77,7 @@
   box-sizing: border-box;
 
   .cld-video-player-skin-dark & {
-    text-shadow: 1px 1px 1px rgba(#000, 0.3);
+    text-shadow: 0 0 1px var(--color-base);
 
     @media only screen and (max-width: 768px) {
       background: var(--color-base);

diff --git a/src/plugins/playlist/ui/thumbnail/thumbnail.scss b/src/plugins/playlist/ui/thumbnail/thumbnail.scss
@@ -22,15 +22,13 @@
     bottom: 0;
     left: 0;
     background: linear-gradient(to top, var(--color-base), transparent 80%);
-    opacity: 0.6;
+    opacity: 0.9;
   }
 
   &.cld-plw-panel-item-active {
     border: 1px solid var(--color-accent);
     box-sizing: border-box;
-    .cld-plw-item-info-wrap {
-      color: var(--color-accent);
-    }
+    box-shadow: 0 0 3em -0.5em var(--color-accent) inset;
   }
 }
 

diff --git a/src/video-player.utils.js b/src/video-player.utils.js
@@ -108,8 +108,9 @@ export const overrideDefaultVideojsComponents = () => {
   const Player = videojs.getComponent('Player');
   let children = Player.prototype.options_.children;
 
-  // Add TitleBar as default
-  children.push('titleBar');
+  if (children.indexOf('titleBar') === -1) {
+    children.push('titleBar');
+  }
 
   const ControlBar = videojs.getComponent('ControlBar');
   if (ControlBar) {