Skip to content

misc(a11y): Update <ul> and roles to be accurate to their intended purpose in launchpad UI#28774

Merged
jennifer-shehane merged 13 commits into
developfrom
a11y-fixes-1
Feb 2, 2024
Merged

misc(a11y): Update <ul> and roles to be accurate to their intended purpose in launchpad UI#28774
jennifer-shehane merged 13 commits into
developfrom
a11y-fixes-1

Conversation

@jennifer-shehane
Copy link
Copy Markdown
Member

@jennifer-shehane jennifer-shehane commented Jan 22, 2024

Fixing some a11y issues found while using Cypress Cloud Accessibility Beta mostly around this dropdown in the Launchpad

Screenshot 2024-01-23 at 4 54 08 PM

Additional details

  • Cypress a11y violation: I think this is reporting incorrectly, see Slack, but updating the structure of the DOM to have proper nesting of ul > li > div resolved it.

  • Cypress a11y violation: Every element within a listbox must have role=option. I wrapped the footer of the select in an li element with a role=option.

  • I updated a test to accommodate for the new update, but also rewrote it to be more descriptive when it fails and less brittle to HTML changes. It was failing with this nondescript error before.

Screenshot 2024-01-29 at 12 55 40 PM

Steps to test

Check percy snapshots to ensure they have not changed. Check Cypress a11y score to see they are lower for launchpad.

How has the user experience changed?

PR Tasks

@cypress
Copy link
Copy Markdown

cypress Bot commented Jan 22, 2024

36 flaky tests on run #53833 ↗︎

0 28974 1343 0 Flakiness 36

Details:

Merge branch 'develop' into a11y-fixes-1
Project: cypress Commit: 5a1f022139
Status: Passed Duration: 20:30 💡
Started: Feb 1, 2024 4:13 PM Ended: Feb 1, 2024 4:34 PM
Flakiness  commands/querying/querying.cy.js • 2 flaky tests • 5x-driver-electron

View Output

Test Artifacts
... > intercept aliases > returns null if no xhr is found Test Replay
... > intercept aliases > returns the 3rd xhr as null Test Replay
Flakiness  e2e/origin/origin.cy.ts • 1 flaky test • 5x-driver-firefox

View Output

Test Artifacts
cy.origin > withBeforeEach > passes runnable state to the secondary origin on retry
    </td>
  </tr></table>
Flakiness  e2e/origin/origin.cy.ts • 1 flaky test • 5x-driver-electron

View Output

Test Artifacts
cy.origin > withBeforeEach > passes runnable state to the secondary origin on retry Test Replay
Flakiness  e2e/origin/commands/waiting.cy.ts • 1 flaky test • 5x-driver-electron

View Output

Test Artifacts
... > throws when foo cannot resolve Test Replay
Flakiness  cypress/cypress.cy.js • 3 flaky tests • 5x-driver-electron

View Output

Test Artifacts
... > correctly returns currentRetry Test Replay
... > correctly returns currentRetry Test Replay
... > correctly returns currentRetry Test Replay

The first 5 flaky specs are shown, see all 20 specs in Cypress Cloud.

Review all test suite changes for PR #28774 ↗︎

@jennifer-shehane jennifer-shehane added the type: accessibility ♿️ Improvements for accessibility label Jan 23, 2024
@jennifer-shehane jennifer-shehane self-assigned this Jan 26, 2024
@jennifer-shehane jennifer-shehane changed the title misc(a11y): Display 'div' for listboxoptions so that a ul is not a direct p… misc(a11y): Update <ul> and roles to be accurate to their intended purpose in launchpad UI Jan 26, 2024
Comment on lines +141 to +143
<li role="option">
<slot name="footer" />
</li>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know you didn't add this, but looking at the code + screenshot, this is a super bizzare usage to place an info/link item in the select 😅

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is!

@jennifer-shehane jennifer-shehane merged commit 835d493 into develop Feb 2, 2024
@jennifer-shehane jennifer-shehane deleted the a11y-fixes-1 branch February 2, 2024 17:02
@cypress-bot
Copy link
Copy Markdown
Contributor

cypress-bot Bot commented Feb 20, 2024

Released in 13.6.5.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v13.6.5, please open a new issue.

@cypress-bot cypress-bot Bot locked as resolved and limited conversation to collaborators Feb 20, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

type: accessibility ♿️ Improvements for accessibility

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants