Skip to content

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
commit author before changes commit author after changes
tree table before changes tree table after changes

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.

Related to #417766 (closed)

Edited by Paulina Sedlak-Jakubowska

Merge request reports