Skip to content

Add axe checks and fix related errors in the linked items component

What does this MR do and why?

This is part of the epic &11126 to add axe checks in feature specs. This MR specifically targets following list of errors from the spec spec/features/projects/work_items/linked_work_items_spec.rb to close the issue Include axe checks in `spec/features/projects/w... (#429790 - closed).

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: #linkeditems
HTML: <div id="linkeditems" aria-expanded="true" class="gl-new-card work-item-relationships">
Fix any of the following: 
- ARIA attribute is not allowed: aria-expanded="true"

2) 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 1 node violate this rule:

Selector: #user-content-linkeditems-links
HTML: <a id="user-content-linkeditems-links" aria-hidden="true" href="#linkeditems" class="gl-link gl-text-decoration-none"></a>
Fix all of the following:
- Focusable content should have tabindex='-1' or be removed from the DOM

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: .gl-new-card-header > .gl-new-card-title-wrapper > h3
HTML: <h3 class="gl-new-card-title"><a id="user-content-linkeditems-links" aria-hidden="true" href="#linkeditems" class="gl-link gl-text-decoration-none"></a> <div class="gl-new-card-title-wrapper"><h3 class="gl-new-card-title">Linked Items</h3> <!----></div></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: `Learn more.`
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

Two of the errors are skipped when the linked item form is opened as the fix to it will be required in gitlab-ui's GlTokenSelector. That will be covered in a separate MR.

Screenshots or screen recordings

Before After
Screenshot 2023-12-05 at 4.58.58 PM.png Screenshot 2023-12-05 at 4.58.32 PM.png

How to set up and validate locally

Run the test locally , it should pass

bundle exec rspec spec/features/projects/work_items/linked_work_items_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.

Related to #429790 (closed)

Edited by Rajan Mistry

Merge request reports