Hero slider indicators are 8px targets 16px apart, below the WCAG 2.2 minimum

Problem/Motivation

The hero slider carousel indicators are 8x8 CSS px targets, 16 px apart centre to centre. WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum) requires 24x24, or, under its spacing exception, at least 24 CSS px between the centres of adjacent targets. Neither holds, so the indicators fail.

axe-core reported target-size (serious, wcag22aa, wcag258) with 3 nodes on the Varbase Starter home page.

Measured in the browser: each indicator is 8x8, the active one 28x8. From components/organisms/hero-slider-container/hero-slider-container.scss:

.carousel-indicators {
  gap: 0.5rem;
  [data-bs-target] { inline-size: 8px; block-size: 8px; }
  .active { inline-size: 1.75rem; }
}

Steps to reproduce

1. Install a site on Vartheme BS5 with a hero slider on the front page, for example Varbase Starter 1.0.x.
2. Open the front page and run axe-core with the WCAG 2.2 AA tags.
3. Or measure the carousel indicators: 8x8 px, with 16 px between adjacent centres.

Proposed resolution

Change the indicator container gap from 0.5rem to 1rem. The dot size stays 8x8 and the active pill stays 1.75rem, so the approved design is unchanged and only the spacing between dots widens.

Measured after the change: centre offsets are 34, 24, 24, all at or above 24, and axe reports zero target-size nodes.

This changes the .carousel-indicators gap only. The .hero-slider__controls gap, also 0.5rem, is a different rule and is deliberately untouched.

Separate observation, not part of this fix: running yarn components:build regenerates three component CSS files nobody had edited (accordion-block, card-text, media-banner), and the regeneration is regressive, flattening var(--bs-secondary-bg-subtle) and var(--bs-primary) to literal hex and deleting explanatory comments. The committed component CSS has evidently been hand-maintained since the last build, so anyone running the documented build script reintroduces the flattening, and dark mode depends on those custom properties. That deserves its own issue.

Remaining tasks

• ✅ File an issue
• ❌ Addition/Change/Update/Fix
• ❌ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support
• ➖ User Guide Documentation support
• ❌ UX/UI designer responsibilities
• ❌ Accessibility and Readability
• ❌ Reviewed by a human
• ❌ Code review by maintainers
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ❌ Update Release Notes
• ❌ Release

User interface changes

• The hero slider indicators sit further apart. The dots keep their size and shape.

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• The hero slider indicators now meet the WCAG 2.2 target size minimum through the spacing exception. The dot size is unchanged.

AI-Generated: Yes