Problem/Motivation

Two accessibility defects were found on a sibling site template by an axe-core scan and fixed today:

  • Footer social icons failing WCAG 2.1 AA contrast at 4.27:1 against the required 4.5:1 (axe rule color-contrast, impact serious). Fixed in #3621197.
  • A front page with no top-level heading (axe rule page-has-heading-one, impact moderate). Addressed by #3621201 and #3621200.

The quality suite here already runs axe-core through varbase-e2e, but it gates on impact level rather than on the specific rules, so a regression in either of these would not be reported by name.

Steps to reproduce

  1. Read the accessibility feature file in the quality suite.
  2. There is no scenario naming color-contrast or page-has-heading-one.

Proposed resolution

Add rule-specific scenarios to the existing accessibility feature, in the file's own style and tags, using the step form it already uses for image-alt, label and html-has-lang:

Then the page should not violate the accessibility rule "color-contrast"
Then the page should not violate the accessibility rule "page-has-heading-one"

A rule-specific scenario only has value if the element under test is actually rendered in CI. Confirm the footer social menu links exist on the CI-installed site before relying on the contrast scenario; if they do not, say so and cover it another way rather than adding a scenario that passes vacuously.

Remaining tasks

  • ✅ File an issue
  • ❌ Addition/Change/Update/Fix
  • ❌ Testing to ensure no regression
  • ❌ Reviewed by a human
  • ❌ Code review by maintainers
  • ❌ Release

User interface changes

  • None. Test coverage only.

API changes

  • None.

Data model changes

  • None.

Release notes snippet

  • Add automated accessibility regression tests for the front page colour contrast and top-level heading.

Issue fork educare-3621202

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rajab natshah created an issue.

  • rajab natshah committed bd3f441b on 1.0.x
    test: #3621202 Name the colour contrast and top-level heading...