fix: Increase contrast on spec header items (#22045)

Co-authored-by: Mark Noonan <mark@cypress.io>

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"]')
+    })
+  })
 })

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
         }"

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;
       }