Skip to content

Use `axe-core-gems` for accessibility testing in feature specs

What does this MR do and why?

Evaluates using axe-core gem for accessibility testing in feature specs.

This MR is focussed on adding appropriate matchers to package and registries settings for group and project.

Violations encountered

Found two violations after limiting scope:

1) 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: .gl-font-style-italic
          HTML: <span class="gl-font-style-italic gl-text-gray-400">Note: Any policy update will result in a change to the scheduled run date and time</span>
          Fix any of the following:
          - Element has insufficient color contrast of 3.51 (foreground color: #89888d, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1

2) 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: p[data-testid="description"] > .gl-link
      HTML: <a href="/help/user/packages/container_registry/reduce_container_registry_storage#cleanup-policy" class="gl-link">How does cleanup work?</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

Screenshots or screen recordings

Uses gl-text-color-500 instead of gl-text-color-400

Before After
Screenshot_2023-02-28_at_4.48.04_pm Screenshot_2023-02-28_at_4.44.16_pm
Screenshot_2023-02-28_at_4.47.45_pm Screenshot_2023-02-28_at_4.44.46_pm

How to set up and validate locally

  • Run the spec files locally bundle exec rspec spec/features/groups/settings/packages_and_registries_spec.rb spec/features/projects/settings/registry_settings_cleanup_tags_spec.rb spec/features/projects/settings/registry_settings_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 #382848 (closed)

Edited by Rahul Chanila

Merge request reports