mgr/dashboard: improve level AA color contrast accessibility for dashboard pages...

Use more accessible colors for dashboard components, text and table columns

Fixes: https://tracker.ceph.com/issues/56023
Signed-off-by: nsedrickm <nsedrick101@gmail.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
index 61128949cd78af5f82193436ad5e8432e84777a7..def7aab11a6ea8cc632e6391213123b3e5d79497 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
@@ -26,7 +26,7 @@ cd-info-card {
   text-align: center;
 
   a {
-    color: vv.$primary-wcag-aa-large-text;
+    color: vv.$primary;
   }
 }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss
index 8131ad5f0e31d4b04501eab2d8efc7fac3bdce71..d4828b3e0340e9f9ecce0ecfb1e03c5bea26bd86 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss
@@ -17,7 +17,7 @@
       }
 
       span.health-warn-description {
-        color: vv.$health-color-warning-wcag-aa-regular-text !important;
+        color: vv.$health-color-warning-800 !important;
       }
     }
   }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
index 95ed689739b942f91aac7dc931847442aa715970..46764975ce33183d4133f1eb637cfc3009b627bf 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
@@ -27,7 +27,7 @@ $card-font-max-size: 21px;
     }
 
     .card-title > a {
-      color: vv.$primary-wcag-aa-large-text;
+      color: vv.$primary;
     }
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.scss
index e5ffb4e59548ebb4c55adec33dddf6f863eb06b9..3a417dda0419119aa6bb307ef7d3d98aeda81b2d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-group/info-group.component.scss
@@ -6,7 +6,7 @@
 }
 
 .popover-icon {
-  color: vv.$primary-wcag-aa-large-text;
+  color: vv.$primary;
 }
 
 .popover-icon:focus {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
index 693a5613b96b1fc837a75e292233f2d274d8a3e0..695fddee8358f6d32c598bc9a2435a8b4526cfa8 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
@@ -18,7 +18,7 @@
 ::ng-deep cd-navigation .cd-navbar-top {
   .cd-navbar-brand {
     background: vv.$secondary;
-    border-top: 4px solid vv.$primary-wcag-aa-large-text;
+    border-top: 4px solid vv.$primary;
 
     .navbar-brand,
     .navbar-brand:hover {
@@ -49,7 +49,7 @@
     }
 
     .cd-navbar-utility > .active > a {
-      background-color: vv.$primary-wcag-aa-large-text;
+      background-color: vv.$primary;
       color: vv.$gray-200;
     }
 
@@ -83,7 +83,7 @@
   .navbar-nav > li > .cd-navbar > a:hover,
   .navbar-nav > li > a:hover,
   .navbar-nav > li:hover {
-    background-color: vv.$primary-wcag-aa-large-text;
+    background-color: vv.$primary;
   }
 
   .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a,
@@ -119,7 +119,7 @@
       }
 
       .open .dropdown-menu {
-        background-color: vv.$primary-wcag-aa-large-text;
+        background-color: vv.$primary;
         border: 0;
         padding-bottom: 0;
         padding-top: 0;
@@ -131,12 +131,12 @@
       }
 
       .open .dropdown-menu > .active > a {
-        background-color: vv.$primary-wcag-aa-large-text;
+        background-color: vv.$primary;
       }
     }
 
     .navbar-nav > li > a:hover {
-      background-color: vv.$primary-wcag-aa-large-text;
+      background-color: vv.$primary;
     }
   }
 }
@@ -150,7 +150,7 @@ $sidebar-width: 200px;
 .cd-navbar-primary .active > a,
 .cd-navbar-primary > .active > a:focus,
 .cd-navbar-primary > .active > a:hover {
-  background-color: vv.$primary-wcag-aa-large-text !important;
+  background-color: vv.$primary !important;
   border: 0 !important;
   color: vv.$white !important;
 }
@@ -197,7 +197,7 @@ $sidebar-width: 200px;
         text-decoration: none;
 
         &:hover {
-          background: vv.$primary-wcag-aa-large-text;
+          background: vv.$primary;
           color: vv.$white;
         }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss
index 5729f7625991bcd1c43152f13717bca2076da262..8bee3d8ff4e40aac63a5e84d2f2ee525867af1e3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss
@@ -10,7 +10,7 @@
 
 a {
   .dot {
-    background-color: vv.$primary;
+    background-color: vv.$primary-500;
     border: 2px solid vv.$secondary;
     border-radius: 50%;
     height: 11px;
@@ -22,6 +22,6 @@ a {
 
   &:hover .dot {
     background-color: vv.$white;
-    border-color: vv.$primary;
+    border-color: vv.$primary-500;
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss
index f3e3b333ce7d6846014c5a645b3ceab6e89b4337..1e1606724ca4cf08192af846711a5a1f0a9b4bc4 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss
@@ -18,6 +18,6 @@
 }
 
 a {
-  color: darken(vv.$primary-wcag-aa-large-text, 10);
+  color: darken(vv.$primary, 10);
   font-weight: bold;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
index 4762b301ff0dcd5082d7e3bbfb0b725b42259d3d..8775b182ae7fc11ad83f482f9dc5395d791d838e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
@@ -203,7 +203,7 @@
       }
 
       &.datatable-row-odd {
-        background-color: vv.$gray-100;
+        background-color: vv.$white;
       }
 
       &.active,

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/health-color.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/health-color.enum.ts
index 7cfea5bc2dd5a9dedc25e54399d223088e38f85e..042394225166b14949f099541840e605bb6879a6 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/health-color.enum.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/health-color.enum.ts
@@ -1,5 +1,5 @@
 export enum HealthColor {
   HEALTH_ERR = 'health-color-error',
-  HEALTH_WARN = 'health-color-warning-wcag-aa-large-text',
+  HEALTH_WARN = 'health-color-warning',
   HEALTH_OK = 'health-color-healthy'
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/health-color.pipe.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/health-color.pipe.spec.ts
index c45276bb546247187e9e75343574f0f35665a8b5..f5e937ce377579bd97704ae3d521b70fe0c65e03 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/health-color.pipe.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/pipes/health-color.pipe.spec.ts
@@ -6,7 +6,7 @@ class CssHelperStub extends CssHelper {
     if (propertyName === 'health-color-healthy') {
       return 'fakeGreen';
     }
-    if (propertyName === 'health-color-warning-wcag-aa-large-text') {
+    if (propertyName === 'health-color-warning') {
       return 'fakeOrange';
     }
     if (propertyName === 'health-color-error') {

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index e27b012614715e338e234b8c1e9f5271800ad2d6..385f2bf07faba42dd8614e47955e4220f0ea9ee4 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -133,6 +133,7 @@ $grid-breakpoints: (
 .badge-cd-label-light-green {
   background-color: $light-green-300;
   color: $white;
+  font-weight: bolder;
 }
 
 // angular-tree-component

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss
index 8ee05900c3eb6d7f272a1b71ff00c4cf87e0f0b2..ad94ffc6ed59d9b37290ee36134eb003b9f52eab 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss
@@ -143,5 +143,5 @@ mark {
 }
 
 a.nav-link {
-  color: vv.$primary-wcag-aa-large-text;
+  color: vv.$primary;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
index c95f87a01ebcfa2aced139940a21e88e5c73f14a..25edc11da130bff471bb9599bbc19793dac4dcc8 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
@@ -16,16 +16,16 @@ $blue: #007bff !default;
 $indigo: #6610f2 !default;
 $purple: #6f42c1 !default;
 $pink: #a94442 !default;
-$red: #ef5c55 !default;
+$red: #dc3545 !default;
 $orange: #fd7e14 !default;
-$yellow: #ffc200 !default;
-$green: #0b0 !default;
+$yellow: #d48200 !default;
+$green: #008a00 !default;
 $teal: #20c997 !default;
 $cyan: #17a2b8 !default;
 $barley-white: #fcecba !default;
 
-$primary: #2b99a8 !default;
-$primary-wcag-aa-large-text: #25828e !default;
+$primary: #25828e !default;
+$primary-500: #2b99a8 !default;
 $secondary: #374249 !default;
 $success: $green !default;
 $info: $primary !default;
@@ -43,15 +43,14 @@ $gold-300: #f4c145;
 $light-green-300: #ace12e;
 
 // Extra theme colors.
-$accent: $red !default;
-$accent-wcag-aa-regular-text: #25828e !default;
+$accent: $primary !default;
 $warning-dark: $orange !default;
 
 $fg-color-over-dark-bg: $white !default;
 $fg-hover-color-over-dark-bg: $gray-500 !default;
 
 $theme-colors: (
-  'accent': $accent-wcag-aa-regular-text,
+  'accent': $accent,
   'warning-dark': $warning-dark
 ) !default;
 
@@ -62,20 +61,19 @@ $body-color: $gray-900 !default;
 $body-bg-alt: $gray-200 !default;
 
 // Health colors.
-$health-color-error: #f00 !default;
+$health-color-error: $red !default;
 $health-color-healthy: $green !default;
-$health-color-warning: #ffa500 !default;
-$health-color-warning-wcag-aa-large-text: #d48200 !default;
-$health-color-warning-wcag-aa-regular-text: #ae6200 !default;
+$health-color-warning: $yellow !default;
+$health-color-warning-800: #9d6d10 !default;
 
 // Chart colors.
-$chart-color-red: #c9190b !default;
+$chart-color-red: $red !default;
 $chart-color-blue: #06c !default;
 $chart-color-orange: #ef9234 !default;
 $chart-color-yellow: #f6d173 !default;
-$chart-color-green: #7cc674 !default;
+$chart-color-green: $green !default;
 $chart-color-gray: #ededed !default;
-$chart-color-cyan: #73c5c5 !default;
+$chart-color-cyan: $primary-500 !default;
 $chart-color-purple: #3c3d99 !default;
 $chart-color-center-text: #151515 !default;
 $chart-color-center-text-description: #72767b !default;