fix: #3625192 Space the hero slider indicators 24px apart to meet WCAG 2.2 target size

Rajab Natshahrequested to merge
issue/vartheme_bs5-3625192:3625192-hero-slider-indicators into 5.0.x

The hero slider carousel indicators measured 8x8 CSS px (active 28x8) with an 8px gap, so adjacent target centres were 16px apart. WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum) needs 24x24, or centres at least 24px apart under its spacing exception. Neither held, and axe reported target-size as serious with 3 nodes.

Issue: https://www.drupal.org/i/3625192

The change

The .carousel-indicators gap, from 0.5rem to 1rem, in the SCSS and the matching line of the committed compiled CSS.

The approved design is unchanged. Dots stay 8x8 and the active pill stays 1.75rem; only the spacing widens. Measured after: centre offsets 34, 24, 24, and zero target-size nodes.

The .hero-slider__controls gap, also 0.5rem, is a different rule and is deliberately untouched.

Why the compiled CSS was edited by hand rather than rebuilt

Running yarn components:build regenerates three unrelated component CSS files (accordion-block, card-text, media-banner), and that regeneration is regressive: it flattens var(--bs-secondary-bg-subtle) and var(--bs-primary) to literal hex and deletes explanatory comments. The committed component CSS has been hand-maintained since the last build. Editing the single line keeps the diff minimal and avoids that damage. The drift between the SCSS sources and the committed compiled CSS deserves its own issue.

Testing

Audited anonymously with axe-core. Before: target-size serious, 3 nodes. After: zero target-size nodes, indicator centre offsets 34px, 24px, 24px.

AI-Generated: Yes

Checkpoints:

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit testing coverage
  • Automated functional testing coverage
  • UX/UI designer responsibilities
  • Readability
  • Accessibility
  • Performance
  • Security
  • Developer Documentation
  • User Guide Documentation
  • Reviewed by human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Release notes snippet
  • Release
Edited by Rajab Natshah

Merge request reports