misc: Fix some a11y violations using Cypress Cloud (#28628)

* Attempt to fix a11y violation with aria role of expanded state * empty commit * Add role for option that is in framework dropdown to address a11y violation Found at https://cloud.cypress.io/projects/ypt4pf/runs/53181/accessibility/025590e09a6edf822a6d05538ae6d876f18ab8fb?snapshotId=3639cfec723398fbc632015ff5b3460bca4c3fcc&violationId=aria-required-children&targetId=I2hlYWRsZXNzdWktbGlzdGJveC1vcHRpb25zLTc%3D * Add alt text for CI provider images * Add aria-label to readonly label for a11y * Add title to stub to reflect title addition in services * Add changelog entry * Update packages/frontend-shared/src/gql-components/topnav/PromptContent.vue Co-authored-by: Bill Glesias <bglesias@gmail.com> --------- Co-authored-by: Bill Glesias <bglesias@gmail.com>
cypress-io · Jan 10, 2024 · 765b859 · 765b859 · cypress-bot · Jan 10, 2024
1 parent aeb5f14
commit 765b859
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 1 deletion.
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -24,6 +24,7 @@ _Released 1/16/2024 (PENDING)_
 
 **Misc:**
 
+- Improved accessibility of some areas of the Cypress App. Addressed in [#28628](/~https://github.com/cypress-io/cypress/pull/28628).
 - Updated some documentation links to go through on.cypress.io. Addressed in [#28623](/~https://github.com/cypress-io/cypress/pull/28623).
 
 ## 13.6.2

diff --git a/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Query.ts b/packages/frontend-shared/cypress/support/mock-graphql/stubgql-Query.ts
@@ -46,6 +46,7 @@ export const stubQuery: MaybeResolver<Query> = {
   videoEmbedHtml () {
     return `<iframe
       src="https://player.vimeo.com/video/855168407?h=0cbc785eef"
+      title="Video about what is new in Cypress"
       class="rounded h-full bg-gray-1000 w-full"
       frameborder="0"
       allow="autoplay; fullscreen; picture-in-picture"

diff --git a/packages/frontend-shared/src/components/Collapsible.vue b/packages/frontend-shared/src/components/Collapsible.vue
@@ -6,6 +6,7 @@
   >
     <div
       data-cy="collapsible-header"
+      role="button"
       :aria-expanded="isOpen"
       class="rounded-t focus:outline-indigo-500"
       :class="{'rounded-b': !isOpen}"

diff --git a/packages/frontend-shared/src/components/TerminalPrompt.vue b/packages/frontend-shared/src/components/TerminalPrompt.vue
@@ -10,6 +10,7 @@
       :value="command"
       data-cy="terminal-prompt-input"
       class="border-none flex-1"
+      aria-label="Terminal command"
     >
     <div class="font-sans">
       <CopyButton

diff --git a/packages/frontend-shared/src/gql-components/topnav/PromptContent.vue b/packages/frontend-shared/src/gql-components/topnav/PromptContent.vue
@@ -23,6 +23,7 @@
               <img
                 :src="provider.icon"
                 width="14"
+                :alt="`${provider.name} logo`"
               >
             </template>
             {{ provider.name }}

diff --git a/packages/launchpad/src/setup/FrameworkOptionsFooter.vue b/packages/launchpad/src/setup/FrameworkOptionsFooter.vue
@@ -1,4 +1,4 @@
-<template>
+<template role="option">
   <div class="flex bg-gray-50 h-[48px] py-[12px] px-[17px] text-gray-800 items-center">
     <div>
       <Icon