Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 13 commits into from Feb 2, 2024

Conversation

jennifer-shehane
Copy link
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

Copy link

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
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
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
80 of 82 checks passed
@jennifer-shehane jennifer-shehane deleted the a11y-fixes-1 branch February 2, 2024 17:02
@cypress-bot
Copy link
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.

None yet

3 participants