Add guides for Cypress Accessibility #6053
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
cypress-documentation
|
||||||||||||||||||||||||||||||||||||||||
| Project |
cypress-documentation
|
| Branch Review |
marktnoonan/accessibility-guides
|
| Run status |
|
| Run duration | 03m 47s |
| Commit |
|
| Committer | marktnoonan |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
279
|
| View all changes introduced in this branch ↗︎ | |
UI Coverage
10.88%
|
|
|---|---|
|
Untested elements
|
2218
|
|
Tested elements
|
3
|
Accessibility
95.76%
|
|
|---|---|
|
Failed rules
|
1 critical
5 serious
4 moderate
0 minor
|
|
Failed elements
|
500
|
jennifer-shehane
approved these changes
Dec 19, 2024
There was a problem hiding this comment.
Just a few changes. I’ll approve without you having addressed them all.
I love having these guides in our docs. The tone and guidance and understanding is a great step forward for us.
In general, I have a few things to mention:
- There are a lot of run on sentences that could be cleaned up more.
- It’d be great to get it to be a bit more scannable
- you might consider having an “example” of the guidance of each page, where it walks through an example project and how to walk through each step with pictures.
|
|
||
| ### Assistive technology support | ||
|
|
||
| Certain accessibility techniques are not fully supported by all assistive technologies like screen readers or voice control software. Axe Core® accounts for this. The software and operating systems tested against are listed in their [Accessibility Supported document](https://github.com/dequelabs/axe-core/blob/develop/doc/accessibility-supported.md). For example: it can seem like a false positive from Axe Core® if a failing technique used in your code appears to work correctly in a certain screen reader, browser and operating system combination that you test with. But if it does not have sufficient accessibility support in commonly used technology configurations, Axe Core® will intentionally fail that technique, allowing you to switch to something with better support. |
There was a problem hiding this comment.
This guide feels like it ends abruptly. I think it’d benefit from some kind of summary or what next. Not blocking this PR though
|
|
||
| <DocsImage | ||
| src="/img/accessibility/guides/github-actions-a11y-block.png" | ||
| width="75%" |
There was a problem hiding this comment.
These widths can look strange on mobile, so always something to check out.
There was a problem hiding this comment.
Good point. Also really wish I could center them, but I didn't find a good way to do that. Edge-to-edge is just too big for a lot of these, left aligned feels a bit odd too though.
|
|
||
| ## Using the Results API | ||
|
|
||
| The Cypress Accessibility Results API provides access to accessibility results after the run is completed, so that you can implement patterns like blocking a pull request or sending out alerts based on specific accessibility criteria. This is done by adding a separate accessibility verification step to your CI pipeline, and using a helper function provided by Cypress to automatically request the report for the appropriate Cypress run based on the build context. The example below shows how this can look in GitHub Actions when there is an accessibility failure based on your own chosen policy: |
There was a problem hiding this comment.
Should we link to the results api doc here?
| (loc) => loc.textContent | ||
| ) | ||
| Cypress._.each(URLs, (URL) => { | ||
| cy.visit(URL) |
There was a problem hiding this comment.
I would recommend splitting this up into separate tests for performance reasons. This could end up being a very long non-performant test. The docs themselves have tests like this - but split into visiting a different page on each test definition.
Co-authored-by: Jennifer Shehane <[email protected]>
Co-authored-by: Jennifer Shehane <[email protected]>
Co-authored-by: Jennifer Shehane <[email protected]>
Co-authored-by: Jennifer Shehane <[email protected]>
Co-authored-by: Jennifer Shehane <[email protected]>
Co-authored-by: Jennifer Shehane <[email protected]>
Co-authored-by: Jennifer Shehane <[email protected]>
Co-authored-by: Jennifer Shehane <[email protected]>
Co-authored-by: Jennifer Shehane <[email protected]>
Co-authored-by: Jennifer Shehane <[email protected]>
MikeMcC399
reviewed
Dec 19, 2024
| npx cypress run --key <record_key> --record --spec "cypress/e2e/my-spec.cy.js" | ||
| ``` | ||
|
|
||
| (You can skip the `--key` option by setting `CYPRESS_RECORD_KEY` as an environment variable. Learn more about recording in our [docs about recorded runs](/guides/cloud/recorded-runs)). |
There was a problem hiding this comment.
Suggested change
| (You can skip the `--key` option by setting `CYPRESS_RECORD_KEY` as an environment variable. Learn more about recording in our [docs about recorded runs](/guides/cloud/recorded-runs)). | |
| (You can skip the `--key` option by setting `CYPRESS_RECORD_KEY` as an environment variable. Learn more about recording in our [docs about recorded runs](/cloud/features/recorded-runs)). |
Moved content - fails to build if not corrected
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds a new Guides section for the Cypress Accessibility product, updates its changelog, and fixes a CSS issue in the footer.