UI: Add a11y testing #24476
Merged
UI: Add a11y testing #24476
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
github-actions
bot
added
the
hashicorp-contributed-pr
hashishaw
commented
Dec 12, 2023
| import manifest from 'vault/config/asset-manifest'; | ||
|
|
||
| preloadAssets(manifest).then(() => { | ||
| setup(QUnit.assert); | ||
| setApplication(Application.create(config.APP)); | ||
| setupGlobalA11yHooks(() => true, { | ||
| helpers: ['render'], |
There was a problem hiding this comment.
Setting the tests to run only on render until we fix some widespread issues so that they generally don't run on acceptance tests
hashishaw
commented
Dec 12, 2023
ui/testem.js
Outdated
| @@ -6,7 +6,7 @@ | |||
| 'use strict'; | |||
|
|
|||
| module.exports = { | |||
| test_page: 'tests/index.html?hidepassed', | |||
| test_page: 'tests/index.html?hidepassed&enableA11yAudit=true', | |||
There was a problem hiding this comment.
If you ever want to run without the a11y tests just remove this query parameter
* aria-labels on nav tags, connect labels to input IDs * add id to input on control group success * add default label to maskedInput textarea * final set of aria-labels in components * fix labels: sidebar target, console input and max/min button, icon * replace console max/min button tooltip with button title * Remove splattributes from Select -- due to classic component, selector was showing up twice. Instead pass @ariaLabel explicitly to <Select> * better labels on home link and list items * more labels * Add sr-only label to text-file for when uploadOnly
* update overview card and selectors * fix heading-order violations in components (https://dequeuniversity.com/rules/axe/4.8/heading-order) * fix list violations (https://dequeuniversity.com/rules/axe/4.8/list) * Replace engine type icon tooltip with title * Use HDS link with helper instead of DocLink component * wrap PKI tab links in <li> * Use standalone links on namespace empty state * heading tags, li wrappers, underlined links * Use Hds Text component * doc links, empty state links have underlines * Show flash message on tool action success
* update calendar-widget * update console ui panel colors * Update light grey on empty state, masked input, radio card, search select, tag, has-text-grey-light * color updates: masked input, namespace picker, has-text-success, kv error page * replace kv paths CodeSnippet with HDS version for better color contrast * replace LDAP cli command CodeSnippet with HDS version for better color contrast * update colors: mostly faint grey * skip color contrast test on flaky popup acceptance tests * test only color-contrast * Revert "test only color-contrast" This reverts commit 6eded7eb86152bc107086a82010e46269cfef6d8. * Update selectors for CodeBlock * fix console colors * Fixes -- masked input obscure color, unskip test, copy-secret-dropdown wrap alignment * Update structure tooltip style to match HDS until full replacement is complete * remove unused color class, set has-text-grey to foreground-faint token * update selectors from sync * color updates on json-diff-patch * setRunOptions on tests * small test updates * set run option for niche control group scenario * Replace all CodeSnippets
* wrap ul links in li * Update enableInput to be compliant * Update filterInput to be compliant * Remove superfluous qp value * Final ul's without li's * replace tooltip for icons on secret and auth mount lists * documentation * Make links consistently have underline and similar styling * fix datetime formfield id * fix link * fix some tests * small cleanup * first four buttons * Revert "first four buttons" This reverts commit 72d0284. * skip flaky tests * add waitUntil * skip tooltip test, text file updates and line chart update --------- Co-authored-by: [email protected] <[email protected]>
Monkeychip
reviewed
Dec 18, 2023
| @@ -21,7 +21,3 @@ | |||
| cursor: default; | |||
| } | |||
| } | |||
| // NICE TO HAVE: replace all instances with helper "is-no-underline" | |||
|
Build Results: |
Monkeychip
reviewed
Dec 18, 2023
Monkeychip
approved these changes
Dec 18, 2023
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 and enables the
ember-a11y-testingaddon for our tests, and fixes some of the violations. The a11y tests only run on integration tests, until we update our common rule violating components (user-menu, console-ui panel). All of the work was reviewed in separate, smaller PR's.Some updates you might notice in the UI:
Comparison screenshots (old left, new right)