From ce647c29df7afc230e1189e3ec728787b1dd16b1 Mon Sep 17 00:00:00 2001
From: Mike Plummer <mike-plummer@users.noreply.github.com>
Date: Fri, 3 Jun 2022 10:26:21 -0500
Subject: [PATCH] fix: Increase contrast on spec header items (#22045)

Co-authored-by: Mark Noonan <mark@cypress.io>
---
 .../cypress/e2e/cypress-in-cypress-e2e.cy.ts   | 18 ++++++++++++++++++
 .../app/src/specs/InlineSpecListHeader.vue     |  4 ++--
 packages/reporter/src/header/header.scss       |  3 ++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts b/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts
index 0f02007cb4..1f6c5ad123 100644
--- a/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts
+++ b/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts
@@ -273,4 +273,22 @@ describe('Dom Content', () => {
     cy.get('.passed > .num').should('contain', 1)
     cy.get('.failed > .num').should('contain', '--')
   })
+
+  describe('accessibility', () => {
+    it('has no axe violations in specs list panel', () => {
+      cy.visitApp()
+      cy.contains('withFailure.spec').click()
+      cy.get('button[aria-controls="reporter-inline-specs-list"]').click()
+      cy.injectAxe()
+      cy.checkA11y('[data-cy="specs-list-panel"]')
+    })
+
+    it('has no axe violations in reporter panel', () => {
+      cy.visitApp()
+      cy.contains('withFailure.spec').click()
+      cy.get('button[aria-controls="reporter-inline-specs-list"]').click()
+      cy.injectAxe()
+      cy.checkA11y('[data-cy="reporter-panel"]')
+    })
+  })
 })
diff --git a/packages/app/src/specs/InlineSpecListHeader.vue b/packages/app/src/specs/InlineSpecListHeader.vue
index eb652bb7af..ac9a9617a7 100644
--- a/packages/app/src/specs/InlineSpecListHeader.vue
+++ b/packages/app/src/specs/InlineSpecListHeader.vue
@@ -11,7 +11,7 @@
         @mousedown.prevent.stop
       >
         <i-cy-magnifying-glass_x16
-          :class="inputFocused ? 'icon-dark-indigo-300' : 'icon-dark-gray-900'"
+          :class="inputFocused ? 'icon-dark-indigo-300' : 'icon-dark-gray-800'"
           class="icon-light-gray-1000"
         />
       </div>
@@ -40,7 +40,7 @@
       >
       <label
         for="inline-spec-list-header-search"
-        class="cursor-text font-light bottom-4px left-24px text-gray-700 select-none absolute"
+        class="cursor-text font-light bottom-4px left-24px text-gray-500 select-none absolute"
         :class="{
           'sr-only': inputFocused || props.search
         }"
diff --git a/packages/reporter/src/header/header.scss b/packages/reporter/src/header/header.scss
index 8e79f400ad..29e28e2880 100644
--- a/packages/reporter/src/header/header.scss
+++ b/packages/reporter/src/header/header.scss
@@ -67,12 +67,13 @@ $color-transition: color 150ms ease-out;
         }
 
         .toggle-specs-text {
-          color: $gray-600;
+          color: $gray-400;
           transition: $color-transition;
         }
       }
 
       .toggle-specs-text {
+        color: $gray-500;
         transition: $color-transition;
       }