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.

Note that this template already places a heading at level: 1 on every Canvas page, including the home page, so it is not expected to be failing page-has-heading-one today. The scenario is added as a regression guard, not as a fix.

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:

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.

If the contrast scenario fails here, that is a real finding: this template's theme is a clone of Vartheme BS5 and may carry the same footer social icon colour. Report it rather than relaxing the test.

Remaining tasks

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

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 horizonaid-3621203

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. See original summary.

  • rajab natshah committed 9104ca16 on 1.0.x
    test: #3621203 Name the colour contrast and top-level heading...
rajab natshah’s picture

Assigned: rajab natshah » Unassigned
Issue summary: View changes
Status: Active » Fixed
Issue tags: +horizonaid-1.0.0

✅ Released horizonaid-1.0.0

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.