chore: various flaky + a11y improvements (#23745)

Co-authored-by: Mark Noonan <[email protected]>

Author: Rachel

circle.yml

@@ -36,7 +36,7 @@ macWorkflowFilters: &darwin-workflow-filters
   when:
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
-    - equal: [ 'webkit-experimental', << pipeline.git.branch >> ]
+    - equal: [ 'correct-dashboard-results', << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -45,7 +45,6 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
   when:
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
-    - equal: [ 'webkit-experimental', << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -65,7 +64,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
     - equal: [ linux-arm64, << pipeline.git.branch >> ]
-    - equal: [ 'webkit-experimental', << pipeline.git.branch >> ]
+    - equal: [ 'lmiller/fixing-flake-1', << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -1283,9 +1282,12 @@ jobs:
             run-webpack-dev-server-integration-tests,
             run-vite-dev-server-integration-tests
       - run:
+          # Sometimes, even though all the circle jobs have finished, Percy times out during `build:finalize`
+          # If all other jobs finish but `build:finalize` fails, we retry it once
+          name: Finalize percy build - allows single retry
           command: |
             PERCY_PARALLEL_NONCE=$CIRCLE_WORKFLOW_WORKSPACE_ID \
-            yarn percy build:finalize
+            yarn percy build:finalize || yarn percy build:finalize
 
   cli-visual-tests:
     <<: *defaults

packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx

@@ -15,10 +15,6 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
     })
   }
 
-  afterEach(() => {
-    cy.percySnapshot()
-  })
-
   it('renders with functional browser menu when show-browsers prop is true', () => {
     cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, {
       render: (gqlVal) => <div class="border-current border-1 h-700px resize overflow-auto"><HeaderBarContent gql={gqlVal} show-browsers={true} /></div>,
@@ -65,6 +61,10 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
   })
 
   describe('breadcrumbs', () => {
+    afterEach(() => {
+      cy.percySnapshot()
+    })
+
     context('with current project', () => {
       const currentProject = {
         title: 'app',
@@ -142,6 +142,7 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
     cy.percySnapshot()
     cy.get('body').click()
     cy.contains('a', text.docsMenu.firstTest).should('not.be.visible')
+    cy.percySnapshot('after click')
   })
 
   it('docs menu has expected links with no current project', () => {
@@ -166,6 +167,8 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
     cy.wrap(Object.keys(expectedDocsLinks)).each((linkName: string) => {
       cy.contains('a', linkName).should('have.attr', 'href', expectedDocsLinks[linkName])
     })
+
+    cy.percySnapshot()
   })
 
   context('responsive design', () => {
@@ -182,6 +185,10 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
       })
     })
 
+    afterEach(() => {
+      cy.percySnapshot()
+    })
+
     // https://github.com/cypress-io/cypress/issues/21842
     it('shows docs menu correctly on small viewports', () => {
       // Simulate the small viewport.
@@ -226,6 +233,7 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
     })
 
     cy.contains('a', '8.7.0').should('be.visible').and('have.attr', 'href', 'https://on.cypress.io/changelog#8-7-0')
+    cy.percySnapshot()
   })
 
   it('shows hint and modal to upgrade to latest version of cypress', () => {
@@ -323,6 +331,7 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
     cy.contains(cloudViewer.fullName).should('be.visible')
     cy.contains(cloudViewer.email).should('be.visible')
     cy.findByRole('button', { name: text.login.actionLogout }).should('be.visible')
+    cy.percySnapshot()
   })
 
   it('Shows a page name instead of project when a page name is provided', () => {
@@ -332,9 +341,14 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
 
     cy.contains('Project').should('not.exist')
     cy.contains('Test Page').should('be.visible')
+    cy.percySnapshot()
   })
 
   describe('prompts', () => {
+    afterEach(() => {
+      cy.percySnapshot()
+    })
+
     describe('the CI prompt', () => {
       context('opens on click', () => {
         beforeEach(() => {

packages/frontend-shared/src/gql-components/HeaderBarContent.vue

@@ -45,7 +45,7 @@
               <li
                 v-if="props.gql.isGlobalMode"
                 class="mx-2px align-middle inline-block"
-                aria-hidden
+                aria-hidden="true"
               >
                 <i-cy-chevron-right_x16 class="icon-dark-gray-200" />
               </li>
@@ -74,7 +74,7 @@
               <template v-if="currentProject.currentTestingType">
                 <li
                   class="mx-2px inline-block align-middle"
-                  aria-hidden
+                  aria-hidden="true"
                 >
                   <i-cy-chevron-right_x16 class="icon-dark-gray-200" />
                 </li>

packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue

@@ -19,6 +19,7 @@
         class="mr-16px min-w-26px w-26px"
         :class="{ 'filter grayscale': browser.disabled || !browser.isVersionSupported }"
         :src="allBrowsersIcons[browser.displayName] || allBrowsersIcons.generic"
+        alt=""
       >
       <div class="flex-grow">
         <div>