Fix contrast accessibility bugs (#2830)

* Service360 accessibility bugfixes
Azure · Nov 28, 2023 · c9ac291 · c9ac291
1 parent 8b49582
commit c9ac291
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 9 deletions.
diff --git a/desktop/data/themes/classic.json b/desktop/data/themes/classic.json
@@ -18,7 +18,7 @@
   "border": "#919191",
   "editor": "vs",
   "text": {
-    "primary": "#323130",
+    "primary": "#262524",
     "secondary": "#666666"
   },
   "breadcrumb": {

diff --git a/desktop/src/@batch-flask/ui/tabs/tab.component.ts b/desktop/src/@batch-flask/ui/tabs/tab.component.ts
@@ -1,5 +1,7 @@
 import { Component, ContentChild, Input, TemplateRef, ViewChild } from "@angular/core";
 
+import "./tabs.scss";
+
 @Component({
     selector: "bl-tab-label",
     template: "<ng-template><ng-content></ng-content></ng-template>",

diff --git a/desktop/src/@batch-flask/ui/tabs/tabs.scss b/desktop/src/@batch-flask/ui/tabs/tabs.scss
@@ -0,0 +1,9 @@
+@import "app/styles/variables";
+
+mat-tab-group {
+    &:not(.form-tabs) .mat-tab-label.cdk-keyboard-focused {
+        border-width: 1px;
+        border-style: solid;
+        border-color: $button-basic-text-color !important;
+    }
+}
diff --git a/desktop/src/app/components/certificate/action/add/add-certificate-form.scss b/desktop/src/app/components/certificate/action/add/add-certificate-form.scss
@@ -5,8 +5,8 @@ bl-add-certificate-form {
     .certificate-deprecation-warning {
         > .warning {
             background-color: var(--color-warn-50);
-            // using the color from var(--color-text-primary)
-            color: #333333;
+            // Primary text color was not dark enough to contrast with link color. Deepened it 6 shades.
+            color: #201f1e;
 
             > .summary-container {
 
@@ -22,7 +22,6 @@ bl-add-certificate-form {
     }
 
     .certificate-warning-alternative-link {
-        // using the color from var(--color-primary-800);
-        color: #1d54af;
+        color: var(--color-primary-600);
     }
 }
diff --git a/desktop/src/app/components/job/details/job-details.scss b/desktop/src/app/components/job/details/job-details.scss
@@ -27,3 +27,7 @@ bl-job-details {
         }
     }
 }
+
+bl-summary-card > .main-tile > .content-container > .content > .details {
+    color: $primary-text !important;
+}
diff --git a/desktop/src/app/components/pool/details/configuration/pool-configuration.scss b/desktop/src/app/components/pool/details/configuration/pool-configuration.scss
@@ -5,8 +5,7 @@ bl-pool-configuration {
     .certificate-deprecation-warning {
         > .warning {
             background-color: var(--color-warn-50);
-            // using the color from var(--color-text-primary)
-            color: #333333;
+            color: #201f1e;
 
             > .summary-container {
 
@@ -22,7 +21,6 @@ bl-pool-configuration {
     }
 
     .certificate-warning-alternative-link {
-        // using the color from var(--color-primary-800);
-        color: #1d54af;
+        color: var(--color-primary-600);
     }
 }