feat(a11y): add solid header background color to ensure accessibility

Videodock · Jan 30, 2024 · bead070 · bead070
1 parent 1968b45
commit bead070
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/packages/ui-react/src/components/Card/Card.module.scss b/packages/ui-react/src/components/Card/Card.module.scss
@@ -35,7 +35,7 @@
       line-height: 36px;
       white-space: nowrap;
       text-overflow: ellipsis;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.12), 0 1px 10px rgba(0, 0, 0, 0.2);
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
 
       @include responsive.mobile-only {
         font-size: 24px;
@@ -54,7 +54,7 @@
     .meta {
       justify-content: space-between;
       padding: 16px;
-      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
+      background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
     }
 
     &:hover {

diff --git a/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss b/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss
@@ -7,7 +7,7 @@
   color: var(--primary-color);
   font-family: var(--body-font-family);
   font-weight: 400;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.2);
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
 }
 
 .mainPadding {
@@ -37,7 +37,7 @@
 
 .info {
   position: relative;
-  width: 70%;
+  width: 50%;
   max-width: 650px;
   min-height: 440px;
 

diff --git a/packages/ui-react/src/utils/theming.ts b/packages/ui-react/src/utils/theming.ts
@@ -18,5 +18,8 @@ export const setThemingVariables = (config: Config) => {
   if (root && headerBackground) {
     root.style.setProperty('--header-background', headerBackground);
     root.style.setProperty('--header-contrast-color', calculateContrastColor(headerBackground));
+  } else {
+    root.style.setProperty('--header-background', 'rgba(0, 0, 0, 0.85)');
+    root.style.setProperty('--header-contrast-color', '#ffff');
   }
 };