Add accessibility feature tests for Repository page and fix violations
What does this MR do and why?
This MR introduces accessibility feature tests for Repository view:
- scoping the checks to 3 sections (last commit, navigation block, project tree table)
- avoiding the scan of diff, as there are know issues and we are planning to rewrite it completely
- skipping
link-in-text-block
as it's a know violation and needs a global change to introduce underline for GlLink component
UI fixes include color changes to reach the minimum color contrast ratio.
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
Before | After |
---|---|
Found violations:
Found 3 accessibility violations:
1) aria-hidden-focus: ARIA hidden element must not be focusable or contain focusable elements (serious)
https://dequeuniversity.com/rules/axe/4.6/aria-hidden-focus?application=axeAPI
The following 2 nodes violate this rule:
Selector: #user-content-testme
HTML: <a aria-hidden="true" href="#testme" class="anchor" id="user-content-testme"></a>
Fix all of the following:
- Focusable content should have tabindex='-1' or be removed from the DOM
Selector: #user-content-usage-in-testing-and-development
HTML: <a aria-hidden="true" href="#usage-in-testing-and-development" class="anchor" id="user-content-usage-in-testing-and-development"></a>
Fix all of the following:
- Focusable content should have tabindex='-1' or be removed from the DOM
2) color-contrast: Elements must have sufficient color contrast (serious)
https://dequeuniversity.com/rules/axe/4.6/color-contrast?application=axeAPI
The following 3 nodes violate this rule:
Selector: .committer
HTML: <div class="committer">Douwe Maanauthored<time title="Apr 9, 2018 9:41am GMT+0200" datetime="2018-04-09T07:41:24+00:00" class="">5 years ago</time></div>
Fix any of the following:
- Element has insufficient color contrast of 3.38 (foreground color: #89888d, background color: #fbfafd, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1
Selector: time[title="Apr 9, 2018 9:41am GMT+0200"]
HTML: <time title="Apr 9, 2018 9:41am GMT+0200" datetime="2018-04-09T07:41:24+00:00" class="">5 years ago</time>
Fix any of the following:
- Element has insufficient color contrast of 3.38 (foreground color: #89888d, background color: #fbfafd, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1
Selector: a[rel="nofollow noreferrer noopener"][target="_blank"] > code
HTML: <code>test_env.rb</code>
Fix any of the following:
- Element has insufficient color contrast of 3.98 (foreground color: #1f75cb, background color: #ececef, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1
3) 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: li[data-sourcepos="12:1-12:106"] > a[rel="nofollow noreferrer noopener"][target="_blank"]
HTML: <a rel="nofollow noreferrer noopener" href="https://gitlab.com/gitlab-org/gitlab-test" target="_blank">gitlab-org/gitlab-test</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
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 #417766 (closed)
Edited by Paulina Sedlak-Jakubowska