misc(a11y): Update <ul> and roles to be accurate to their intended pu…

…rpose in launchpad UI (#28774)

* misc: Display 'div' for listboxoptions so that a ul is not a direct parent of ul

* changelog entry

* update changelog entry

* Update structure of dropdown to be ul -> li -> div

* Wrap final element in listbox with li with role=option

* Fix double misc sections

* Update test to be less brittle and to error with more descriptive error if html changes

cli/CHANGELOG.md

@@ -1,4 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 13.6.5 
+
+_Released 2/13/2024 (PENDING)_
+
+**Misc:**
+
+- Improved accessibility of the Cypress App in some areas. Addressed in [#28774](https://github.com/cypress-io/cypress/pull/28774).
+
 ## 13.6.4
 
 _Released 1/30/2024_

packages/frontend-shared/src/components/Select.vue

@@ -71,16 +71,18 @@
           leave-from-class="opacity-100"
           leave-to-class="opacity-0"
         >
-          <ListboxOptions class="bg-white rounded shadow-lg ring-black mt-1 text-base w-full max-h-60 ring-1 ring-opacity-5 z-10 absolute overflow-auto sm:text-sm focus:outline-none">
+          <ListboxOptions
+            class="bg-white rounded shadow-lg ring-black mt-1 text-base w-full max-h-60 ring-1 ring-opacity-5 z-10 absolute overflow-auto sm:text-sm focus:outline-none"
+          >
             <ListboxOption
               v-for="option in props.options"
               :key="get(option, itemKey)"
               v-slot="{ active, selected }"
-              as="ul"
+              as="li"
               :value="option"
               :disabled="option.disabled || false"
             >
-              <li
+              <div
                 class="border-transparent cursor-pointer border py-2 pr-8 pl-4 block truncate select-none relative "
                 :class="[{
                   'font-medium bg-jade-50': isSelectedOption(option),
@@ -134,9 +136,11 @@
                     </span>
                   </slot>
                 </span>
-              </li>
+              </div>
             </ListboxOption>
-            <slot name="footer" />
+            <li role="option">
+              <slot name="footer" />
+            </li>
           </ListboxOptions>
         </transition>
       </div>

packages/launchpad/src/setup/EnvironmentSetup.cy.tsx

@@ -22,38 +22,16 @@ describe('<EnvironmentSetup />', { viewportWidth: 800 }, () => {
     .click()
     .should('have.attr', 'aria-expanded', 'true')
 
-    cy.get('li')
-    .then(($items) => {
-      return $items.map((_idx, html) => Cypress.$(html).text()).get()
-    })
-    // alphabetical order
-    // we should "support is in alpha" for a11y (not shown visually)
-    .should('deep.eq', ['Create React App (v5) Support is in  Alpha', 'Vue.js (v3)'])
-
-    const frameworkIconName = (frameworkName: string) => {
-      if (frameworkName.includes('React')) {
-        return 'react-logo'
-      }
-
-      if (frameworkName.includes('Nuxt')) {
-        return 'nuxtjs-logo'
-      }
-
-      if (frameworkName.includes('Vue')) {
-        return 'vue-logo'
-      }
-
-      return `${Cypress._.lowerCase(frameworkName).replace(' ', '')}-logo`
-    }
-
-    ;['Create React App (v5) Support is in Alpha', 'Vue.js (v3)'].forEach((name) => {
-      cy.findByRole('option', { name })
-      .find('svg')
-      .should('have.attr', 'data-cy', frameworkIconName(name))
+    cy.get('li').spread(($firstLi, $secondLi) => {
+      cy.wrap($firstLi).should('contain', 'Create React App (v5) Support is in  Alpha')
+      cy.wrap($firstLi).find('svg').should('have.attr', 'data-cy', 'react-logo')
+
+      cy.wrap($secondLi).should('contain', 'Vue.js (v3)')
+      cy.wrap($secondLi).find('svg').should('have.attr', 'data-cy', 'vue-logo')
     })
 
     cy.findByRole('button', { name: 'Next step' })
-    .should('have.disabled')
+    .should('be.disabled')
 
     cy.findByRole('link', { name: 'Browse our list of third-party framework integrations' })
     .should('have.attr', 'href', 'https://on.cypress.io/component-integrations?utm_medium=Select+Framework+Dropdown&utm_source=Binary%3A+Launchpad&utm_campaign=Browse+third-party+frameworks')