Add axe checks to `ee/spec/features/epics/user_comments_on_epic_spec.rb`
requested to merge 426256-include-axe-checks-in-ee-spec-features-epics-user_comments_on_epic_spec-rb-feature-test into master
What does this MR do and why?
Adds axe check per &11126
Error output on initial rspec run
Note: this output is actually wider in scope than the rspec in this file; when scoping the axe checks with a .within '[something]'
, there are no errors.
Click to expand
1.1) Failure/Error: expect(page).to be_axe_clean
Found 4 accessibility violations:
1) aria-allowed-attr: Elements must only use allowed ARIA attributes (critical)
https://dequeuniversity.com/rules/axe/4.6/aria-allowed-attr?application=axeAPI
The following 1 node violate this rule:
Selector: .related-items-tree
HTML: <div aria-expanded="true" class="related-items-tree gl-new-card gl-mt-4">
Fix any of the following:
- ARIA attribute is not allowed: aria-expanded="true"
2) 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: #switch-to-rich-text-editor > .gl-button-text
HTML: <span class="gl-button-text">Switch to rich text editing</span>
Fix any of the following:
- Element has insufficient color contrast of 4.04 (foreground color: #737278, background color: #ececef, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
3) heading-order: Heading levels should only increase by one (moderate)
https://dequeuniversity.com/rules/axe/4.6/heading-order?application=axeAPI
The following 1 node violate this rule:
Selector: h3
HTML: <h3 class="gl-new-card-title">Issues</h3>
Fix any of the following:
- Heading order invalid
4) 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: a[data-testid="help-link"]
HTML: <a data-testid="help-link" aria-label="Learn more about linking child issues and epics" href="/help/user/group/epics/manage_epics#manage-issues-assigned-to-an-epic" rel="noopener" target="_blank" class="gl-link">Learn more</a>
Fix any of the following:
- The link has insufficient color contrast of 1.01:1 with the surrounding text. (Minimum contrast is 3:1, link text: #1f75cb, surrounding text: #737278)
- The link has no styling (such as underline) to distinguish it from the surrounding text
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
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 #426256 (closed)
Edited by Chad Lavimoniere