feat: FLUX-471 - vl-header, vl-header-next - skip-to-content link (WCAG 2.4.1)

[kspeltix]

Jira

https://jira.omgeving.vlaanderen.be/jira/browse/FLUX-471

Samenvatting

vl-header en vl-header-next krijgen een optioneel skip-to-content-id attribuut waarmee toetsenbordgebruikers het headerblok kunnen overslaan en meteen naar de pagina-inhoud springen (WCAG 2.4.1 — Blokken omzeilen). De skip-link styling wordt mee geïnjecteerd zodat consumers geen extra stylesheet moeten laden.

Wijzigingen

• Nieuw optioneel skip-to-content-id attribuut op vl-header en vl-header-next: bij een gezette waarde verschijnt een <a class="vl-skip-link"> als eerste focusbaar element van de header.
• De skip-link is visueel verborgen tot hij toetsenbord-focus krijgt; bij activering verplaatst hij focus én scroll naar het opgegeven content-element.
• De bijhorende accessibility-styling wordt automatisch mee geïnjecteerd, zodat de link werkt zonder dat de consumer extra stylesheets moet laden.
• Zonder skip-to-content-id wordt geen link gerenderd en volgt een console-waarschuwing met WCAG-referentie.
• De skip-link-logica staat nu in één gedeelde helper in @domg-wc/common die door vl-header, vl-header-next én vl-functional-header gebruikt wordt (gedragsbehoudende refactor van de functional-header).

Backwards compatibility

Volledig backwards-compatible — geen breaking changes.

Succescriteria

• vl-header (en vl-header-next) rendert een <a class="vl-skip-link"> als eerste focusbaar element — als eerste kind van #header__container bij gezet skip-to-content-id.
• Visueel verborgen tot toetsenbord-focus, dan zichtbaar — via de mee-geïnjecteerde .vl-skip-link styling.
• Activeren verplaatst focus én scrollt naar het content-element — via de gedeelde navigateToAnchor()-util (tabindex-fallback, cross-shadow lookup).
• Skip-link styling mee geïnjecteerd zonder extra stylesheet bij consumer — idempotent in document.adoptedStyleSheets.
• axe/WCAG 2.4.1 faalt niet langer — de skip-link vervult het bypass-mechanisme zodra skip-to-content-id gezet is; de bestaande axe-test blijft groen.

[k-o-e-n]

Ik zie dat er bij de skip link in de functional header implementatie al een bug zat. scrollIntoView zorgt ervoor dat de target tot achter de sticky header scrollt ipv eronder. Eventueel moeten we kijken om dynamisch een scrollMarginTop mee te geven aan de target.