misc: More accessibility fixes (#29322)

* misc: Add tabindex to shiki code highlights so that it is accessible via the keyboard. * Add tabindex for code preview in error-header * Change h3 to h2 to meet a11y guidelines for incremental headers * Add roles for landmarks * Move navigation role to correct area * Update main to have singular role * update nav in banner to 'div' so there aren't 2 navs * Have an h1 on the Global page to address a11y violation * Fix aria-disabled attr to have valid 'true' value instead of 'disabled' * Add changelog entry * Fix tests that are looking for aria-disabled to now look for 'true' * chore: fix test that's failing in npm/react test
cypress-io · May 2, 2024 · 1bb5a73 · 1bb5a73 · cypress-bot · May 2, 2024
1 parent f629856
commit 1bb5a73
Show file tree

Hide file tree

Showing 23 changed files with 67 additions and 55 deletions.
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -11,6 +11,10 @@ _Released 5/7/2024 (PENDING)_
 
 - We now pass the same default Chromium flags to Electron as we do to Chrome. As a result of this change, the application under test's `navigator.webdriver` property will now correctly be `true` when testing in Electron. Fixes [#27939](https://github.com/cypress-io/cypress/issues/27939).
 
+**Misc:**
+
+- Improved accessibility of the Cypress App in some areas. Addressed in [#29322](https://github.com/cypress-io/cypress/pull/29322).
+
 **Dependency Updates:**
 
 - Updated electron from `27.1.3` to `27.3.10` to address [CVE-2024-3156](https://nvd.nist.gov/vuln/detail/CVE-2024-3156). Addressed in [#29431](https://github.com/cypress-io/cypress/pull/29431).

diff --git a/npm/react/cypress/component/basic/error-boundary.cy.jsx b/npm/react/cypress/component/basic/error-boundary.cy.jsx
@@ -45,6 +45,6 @@ describe('Error Boundary', () => {
     )
 
     cy.get('header h1').should('contain', 'Something went wrong.')
-    cy.get('header h3').should('contain', 'ChildWithError failed to load')
+    cy.get('header h2').should('contain', 'ChildWithError failed to load')
   })
 })
diff --git a/npm/react/cypress/component/basic/error-boundary.jsx b/npm/react/cypress/component/basic/error-boundary.jsx
@@ -30,7 +30,7 @@ export class ErrorBoundary extends React.Component {
         <React.Fragment>
           <header>
             <h1>Something went wrong.</h1>
-            <h3>{`${name} failed to load`}</h3>
+            <h2>{`${name} failed to load`}</h2>
           </header>
           <section>
             <pre>

diff --git a/packages/app/cypress/e2e/cypress-in-cypress.cy.ts b/packages/app/cypress/e2e/cypress-in-cypress.cy.ts
@@ -41,7 +41,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
         ctx.coreData.servers.cdpSocketServer?.emit('automation:disconnected')
       })
 
-      cy.contains('h3', 'The Cypress extension has disconnected')
+      cy.contains('h2', 'The Cypress extension has disconnected')
 
       cy.withCtx((ctx, { sinon }) => {
         sinon.stub(ctx.actions.project, 'launchProject').resolves()
@@ -84,7 +84,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
         connectedCallback(false)
       })
 
-      cy.contains('h3', 'The Cypress extension is missing')
+      cy.contains('h2', 'The Cypress extension is missing')
 
       // cy.percySnapshot() // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
 

diff --git a/packages/app/cypress/e2e/subscriptions/errorWarningChange-subscription.cy.ts b/packages/app/cypress/e2e/subscriptions/errorWarningChange-subscription.cy.ts
@@ -5,7 +5,7 @@ describe('errorWarningChange subscription', () => {
   })
 
   function assertLoadingIntoErrorWorks (errorName: string) {
-    cy.contains('h3', errorName).should('be.visible')
+    cy.contains('h2', errorName).should('be.visible')
     cy.contains('[role="alert"]', 'Loading').should('not.exist')
   }
 
@@ -48,7 +48,7 @@ module.exports = {
       })
 
       it('shows expected error for malformed config file', () => {
-        cy.contains('h3', 'SyntaxError').should('not.exist')
+        cy.contains('h2', 'SyntaxError').should('not.exist')
         cy.withCtx(async (ctx) => {
           await ctx.actions.file.writeFileInProject('cypress.config.js',
 `   
@@ -75,7 +75,7 @@ module.exports = {
         })
 
         cy.contains(cy.i18n.launchpadErrors.generic.retryButton).click()
-        cy.contains('h3', 'SyntaxError').should('not.exist')
+        cy.contains('h2', 'SyntaxError').should('not.exist')
       })
     })
   })

diff --git a/packages/app/src/debug/DebugContainer.cy.tsx b/packages/app/src/debug/DebugContainer.cy.tsx
@@ -170,7 +170,7 @@ describe('<DebugContainer />', () => {
         mountTestRun('allSkipped')
 
         cy.findByTestId('collapsible').should('be.visible')
-        cy.contains('h3', 'Incomplete')
+        cy.contains('h2', 'Incomplete')
         cy.contains('The browser server never connected.').should('be.visible')
         cy.contains('2 of 3 specs skipped').should('be.visible')
       })
@@ -181,7 +181,7 @@ describe('<DebugContainer />', () => {
         mountTestRun('noTests')
 
         cy.findByTestId('collapsible').should('be.visible')
-        cy.contains('h3', 'Incomplete')
+        cy.contains('h2', 'Incomplete')
         cy.contains('Run has no tests').should('be.visible')
       })
     })
@@ -191,7 +191,7 @@ describe('<DebugContainer />', () => {
         mountTestRun('timedOutWithCi')
 
         cy.findByTestId('collapsible').should('be.visible')
-        cy.contains('h3', 'Incomplete')
+        cy.contains('h2', 'Incomplete')
         cy.contains('Circle CI #1234').should('have.attr', 'href', 'https://circleci.com').should('be.visible')
         cy.contains('Archive this run to remove it').should('be.visible')
       })
@@ -200,7 +200,7 @@ describe('<DebugContainer />', () => {
         mountTestRun('timedOutWithoutCi')
 
         cy.findByTestId('collapsible').should('be.visible')
-        cy.contains('h3', 'Incomplete')
+        cy.contains('h2', 'Incomplete')
         cy.contains('Circle CI #1234').should('not.exist')
         cy.contains('Archive this run to remove it').should('be.visible')
       })

diff --git a/packages/app/src/debug/DebugRunStates.cy.tsx b/packages/app/src/debug/DebugRunStates.cy.tsx
@@ -37,7 +37,7 @@ describe('Debug page states', () => {
       cy.mount(<DebugErrored errors={[mockError]} totalSkippedSpecs={1} totalSpecs={1} />)
 
       cy.findByTestId('collapsible').should('be.visible')
-      cy.get('h3').contains('Incomplete')
+      cy.get('h2').contains('Incomplete')
       cy.contains(mockError)
       cy.contains('1 of 1 spec skipped').should('be.visible')
     })
@@ -46,7 +46,7 @@ describe('Debug page states', () => {
       cy.mount(<DebugErrored errors={[mockError]} totalSkippedSpecs={4} totalSpecs={50} />)
 
       cy.findByTestId('collapsible').should('be.visible')
-      cy.get('h3').contains('Incomplete')
+      cy.get('h2').contains('Incomplete')
       cy.contains(mockError)
       cy.contains('4 of 50 specs skipped').should('be.visible')
     })
@@ -57,7 +57,7 @@ describe('Debug page states', () => {
       cy.mount(<DebugNoTests />)
 
       cy.findByTestId('collapsible').should('be.visible')
-      cy.get('h3').contains('Incomplete')
+      cy.get('h2').contains('Incomplete')
       cy.contains('Run has no tests')
     })
   })
@@ -67,7 +67,7 @@ describe('Debug page states', () => {
       cy.mount(<DebugTimedout totalSkippedSpecs={4} totalSpecs={50} />)
 
       cy.findByTestId('collapsible').should('be.visible')
-      cy.get('h3').contains('Incomplete')
+      cy.get('h2').contains('Incomplete')
       cy.contains('The run started but never completed. This can happen when the run is cancelled from CI or when Cypress crashes while running tests. Archive this run to remove it from the runs list and analytics.')
       cy.contains('4 of 50 specs skipped')
     })
@@ -77,7 +77,7 @@ describe('Debug page states', () => {
         ci={{ id: '123', url: 'https://circleci.com/', formattedProvider: 'CircleCI', ciBuildNumberFormatted: '12345' }} totalSkippedSpecs={4} totalSpecs={50} />)
 
       cy.findByTestId('collapsible').should('be.visible')
-      cy.get('h3').contains('Incomplete')
+      cy.get('h2').contains('Incomplete')
       cy.contains('The run started but never completed. This can happen when the run is cancelled from CI or when Cypress crashes while running tests. Check your CircleCI #12345 logs for more information. Archive this run to remove it from the runs list and analytics.')
       cy.findByTestId('external').contains('CircleCI #12345').should('have.attr', 'href', 'https://circleci.com/')
       cy.contains('4 of 50 specs skipped')
@@ -189,7 +189,7 @@ describe('Debug page states', () => {
     it('renders', () => {
       cy.mount(<DebugCancelledAlert totalSpecs={5} totalSkippedSpecs={2} cancellation={{ cancelledAt: '2019-01-25T02:00:00.000Z', cancelledBy: { email: '[email protected]', fullName: 'Test Tester' } }} />)
       cy.findByTestId('collapsible').should('be.visible')
-      cy.get('h3').contains('Manually cancelled')
+      cy.get('h2').contains('Manually cancelled')
       cy.contains('2 of 5 specs skipped')
       cy.findByTestId('cancelled-by-user-avatar').should('have.attr', 'style', 'background-image: url("https://s.gravatar.com/avatar/402f6cafb6c02371c2c23c5215ae3d85?size=48&default=mm");')
       cy.contains('Test Tester')

diff --git a/packages/app/src/debug/DebugSpec.cy.tsx b/packages/app/src/debug/DebugSpec.cy.tsx
@@ -493,7 +493,7 @@ describe('Run Failures button', () => {
     ))
 
     cy.findByTestId('run-failures')
-    .should('have.attr', 'aria-disabled', 'disabled')
+    .should('have.attr', 'aria-disabled', 'true')
     .should('not.have.attr', 'href')
 
     cy.findByTestId('run-failures').realHover()
@@ -517,7 +517,7 @@ describe('Run Failures button', () => {
     ))
 
     cy.findByTestId('run-failures')
-    .should('have.attr', 'aria-disabled', 'disabled')
+    .should('have.attr', 'aria-disabled', 'true')
     .should('not.have.attr', 'href')
 
     cy.findByTestId('run-failures').realHover()

diff --git a/packages/app/src/runner/automation/AutomationDisconnected.cy.tsx b/packages/app/src/runner/automation/AutomationDisconnected.cy.tsx
@@ -6,7 +6,7 @@ describe('AutomationDisconnected', () => {
     cy.mount(<AutomationDisconnected />)
 
     cy.findByTestId('collapsible').should('be.visible')
-    cy.contains('h3', 'The Cypress extension has disconnected.')
+    cy.contains('h2', 'The Cypress extension has disconnected.')
     cy.contains('p', 'Cypress cannot run tests without this extension.')
     cy.get('a').contains('Read more about browser management').should('have.attr', 'href', 'https://on.cypress.io/launching-browsers')
 

diff --git a/packages/app/src/runner/automation/AutomationMissing.cy.tsx b/packages/app/src/runner/automation/AutomationMissing.cy.tsx
@@ -15,7 +15,7 @@ describe('AutomationMissing', () => {
     })
 
     cy.findByTestId('collapsible').should('be.visible')
-    cy.contains('h3', 'The Cypress extension is missing.')
+    cy.contains('h2', 'The Cypress extension is missing.')
     cy.contains('p', 'Cypress cannot run tests without this extension. Please choose another browser.')
     cy.findByTestId('external').contains('Read more about browser management').should('have.attr', 'href', 'https://on.cypress.io/launching-browsers')
 

diff --git a/packages/app/src/runs/RunsContainer.cy.tsx b/packages/app/src/runs/RunsContainer.cy.tsx
@@ -127,7 +127,7 @@ describe('<RunsContainer />', { keystrokeDelay: 0 }, () => {
         },
       })
 
-      cy.get('h3').contains(defaultMessages.runs.empty.gitRepositoryNotDetected)
+      cy.get('h2').contains(defaultMessages.runs.empty.gitRepositoryNotDetected)
       cy.contains(defaultMessages.runs.empty.ensureGitSetupCorrectly)
     })
 
@@ -146,7 +146,7 @@ describe('<RunsContainer />', { keystrokeDelay: 0 }, () => {
         },
       })
 
-      cy.get('h3').contains(defaultMessages.runs.empty.gitRepositoryNotDetected)
+      cy.get('h2').contains(defaultMessages.runs.empty.gitRepositoryNotDetected)
       cy.contains(defaultMessages.runs.empty.ensureGitSetupCorrectly)
       cy.get('[data-cy=alert-suffix-icon]').click()
       cy.get('[data-cy=alert-header]').should('not.exist')
@@ -175,7 +175,7 @@ describe('<RunsContainer />', { keystrokeDelay: 0 }, () => {
         },
       })
 
-      cy.get('h3').contains(defaultMessages.runs.empty.noRunsFoundForBranch)
+      cy.get('h2').contains(defaultMessages.runs.empty.noRunsFoundForBranch)
       cy.get('p').contains(defaultMessages.runs.empty.noRunsForBranchMessage)
       // The utm_source will be Binary%3A+App in production`open` mode but we assert using Binary%3A+Launchpad as this is the value in CI
       cy.contains(defaultMessages.links.learnMoreButton).should('have.attr', 'href', 'https://on.cypress.io/git-info?utm_source=Binary%3A+Launchpad&utm_medium=Runs+Tab&utm_campaign=No+Runs+Found')
@@ -202,7 +202,7 @@ describe('<RunsContainer />', { keystrokeDelay: 0 }, () => {
         },
       })
 
-      cy.get('h3').contains(defaultMessages.runs.empty.noRunsFoundForBranch)
+      cy.get('h2').contains(defaultMessages.runs.empty.noRunsFoundForBranch)
       cy.get('p').contains(defaultMessages.runs.empty.noRunsForBranchMessage)
       // The utm_source will be Binary%3A+App in production`open` mode but we assert using Binary%3A+Launchpad as this is the value in CI
       cy.contains(defaultMessages.links.learnMoreButton).should('have.attr', 'href', 'https://on.cypress.io/git-info?utm_source=Binary%3A+Launchpad&utm_medium=Runs+Tab&utm_campaign=No+Runs+Found')

diff --git a/packages/frontend-shared/src/components/AlertHeader.vue b/packages/frontend-shared/src/components/AlertHeader.vue
@@ -12,14 +12,14 @@
         :class="prefixIconClass"
       />
     </slot>
-    <h3
+    <h2
       class="grow font-medium text-left leading-normal decoration-current"
       :class="headerClass"
     >
       <slot name="title">
         {{ title }}
       </slot>
-    </h3>
+    </h2>
     <div class="relative shrink">
       <slot
         name="suffixIcon"

diff --git a/packages/frontend-shared/src/components/Button.cy.tsx b/packages/frontend-shared/src/components/Button.cy.tsx
@@ -105,7 +105,7 @@ describe('<Button />', { viewportWidth: 300, viewportHeight: 400 }, () => {
     ))
 
     cy.contains('a', 'test').should('not.have.attr', 'href')
-    cy.contains('a', 'test').should('have.attr', 'aria-disabled', 'disabled')
+    cy.contains('a', 'test').should('have.attr', 'aria-disabled', 'true')
     cy.contains('a', 'test').should('have.attr', 'role', 'link')
   })
 

diff --git a/packages/frontend-shared/src/components/Button.vue b/packages/frontend-shared/src/components/Button.vue
@@ -167,7 +167,7 @@ const linkProps = computed(() => {
   if (props.disabled) {
     return {
       role: 'link',
-      ariaDisabled: 'disabled',
+      ariaDisabled: 'true',
       href: null,
     }
   }

diff --git a/packages/frontend-shared/src/components/ShikiHighlight.vue b/packages/frontend-shared/src/components/ShikiHighlight.vue
@@ -21,6 +21,7 @@ shikiWrapperClasses computed property.
     <div
       v-if="highlighterInitialized"
       ref="codeEl"
+      tabindex="0"
       :class="[
         'shiki-wrapper',
 

diff --git a/packages/frontend-shared/src/gql-components/HeaderBarContent.vue b/packages/frontend-shared/src/gql-components/HeaderBarContent.vue
@@ -13,13 +13,14 @@
       <div
         v-else
         class="flex font-medium text-gray-700 items-center children:leading-[24px]"
+        role="banner"
       >
         <img
           class="h-[32px] mr-[18px] w-[32px]"
           src="../assets/logos/cypress-dark.png"
           alt="cypress"
         >
-        <nav>
+        <div>
           <ol>
             <li
               v-if="props.gql.isGlobalMode"
@@ -84,9 +85,12 @@
               </template>
             </template>
           </ol>
-        </nav>
+        </div>
       </div>
-      <div class="flex gap-6">
+      <nav
+        class="flex gap-6"
+        role="navigation"
+      >
         <TopNav
           :gql="props.gql"
           :show-browsers="props.showBrowsers"
@@ -152,7 +156,7 @@
             <span class="font-medium whitespace-nowrap group-hocus:text-indigo-500">{{ t('topNav.login.actionLogin') }}</span>
           </button>
         </div>
-      </div>
+      </nav>
     </div>
   </div>
 </template>