Use `axe-core-gems` for accessibility testing in feature specs
requested to merge 382848-evaluate-axe-core-rspec-in-feature-specs-for-accessibility-testing into master
What does this MR do and why?
Evaluates using axe-core gem for accessibility testing in feature specs.
This MR is focussed on adding appropriate matchers to package and registries settings for group and project.
- Fixed
color-contrast
related accessibility issue in couple of pages. - Ignores
link-in-text-block
rule usingaccording_to
https://github.com/dequelabs/axe-core-gems/blob/develop/packages/axe-core-rspec/README.md#according_to---accessibility-standard-tag-clause
Violations encountered
Found two violations after limiting scope:
1) color-contrast: Elements must have sufficient color contrast (serious)
https://dequeuniversity.com/rules/axe/4.6/color-contrast?application=axeAPI
The following 1 node violate this rule:
Selector: .gl-font-style-italic
HTML: <span class="gl-font-style-italic gl-text-gray-400">Note: Any policy update will result in a change to the scheduled run date and time</span>
Fix any of the following:
- Element has insufficient color contrast of 3.51 (foreground color: #89888d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1
2) link-in-text-block: Links must be distinguishable without relying on color (serious)
https://dequeuniversity.com/rules/axe/4.6/link-in-text-block?application=axeAPI
The following 1 node violate this rule:
Selector: p[data-testid="description"] > .gl-link
HTML: <a href="/help/user/packages/container_registry/reduce_container_registry_storage#cleanup-policy" class="gl-link">How does cleanup work?</a>
Fix any of the following:
- The link has insufficient color contrast of 2.69:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1f75cb, surrounding text: #333238)
- The link has no styling (such as underline) to distinguish it from the surrounding text
Screenshots or screen recordings
Uses gl-text-color-500
instead of gl-text-color-400
Before | After |
---|---|
How to set up and validate locally
- Run the spec files locally
bundle exec rspec spec/features/groups/settings/packages_and_registries_spec.rb spec/features/projects/settings/registry_settings_cleanup_tags_spec.rb spec/features/projects/settings/registry_settings_spec.rb
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #382848 (closed)
Edited by Rahul Chanila