From c9ac291c2bc272dcb284b5e582a9c74579d3d02f Mon Sep 17 00:00:00 2001
From: ReneOv-MSFT <142273469+ReneOv-MSFT@users.noreply.github.com>
Date: Mon, 27 Nov 2023 16:55:24 -0800
Subject: [PATCH] Fix contrast accessibility bugs (#2830)

* Service360 accessibility bugfixes
---
 desktop/data/themes/classic.json                         | 2 +-
 desktop/src/@batch-flask/ui/tabs/tab.component.ts        | 2 ++
 desktop/src/@batch-flask/ui/tabs/tabs.scss               | 9 +++++++++
 .../certificate/action/add/add-certificate-form.scss     | 7 +++----
 desktop/src/app/components/job/details/job-details.scss  | 4 ++++
 .../pool/details/configuration/pool-configuration.scss   | 6 ++----
 6 files changed, 21 insertions(+), 9 deletions(-)
 create mode 100644 desktop/src/@batch-flask/ui/tabs/tabs.scss

diff --git a/desktop/data/themes/classic.json b/desktop/data/themes/classic.json
index 7dc519d8fe..2fa5f5ab36 100644
--- 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
index 78c35f7ead..81c5eef137 100644
--- 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
new file mode 100644
index 0000000000..68f563a089
--- /dev/null
+++ 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
index 60f4d8c491..ad31c403c5 100644
--- 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
index 24c3abd167..347f3bfa18 100644
--- 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
index e997549a66..2615055f4d 100644
--- 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);
     }
 }