Skip to content

Add axe checks to `ee/spec/features/epics/user_comments_on_epic_spec.rb`

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.

Related to #426256 (closed)

Edited by Chad Lavimoniere

Merge request reports