Repository navigation
fix(a11y): resolve homepage axe WCAG A/AA violations (#1794) - #1809
Merged
Merged
Conversation
Re-measured against the consented homepage with axe-core 4.10.2. Fixes the content-level failures: - aria-allowed-attr (7): VerbFlipTile bound aria-pressed unconditionally, but it's invalid on the <a> (role=link) verb tiles. Now only on the shelf-header button variant; the link's flip affordance stays in aria-label. - scrollable-region-focusable (7): the scrollable .hp-flip__face--back is now keyboard-focusable while flipped (:tabindex), and its overflow-y scroll container is gated on [data-flipped=true] so the hidden default state isn't a phantom tab stop. - color-contrast (3): the failing nodes were .badge--new (white on #16a34a, 3.3:1) and .badge--hidden_gem (white on #ca8a04, 2.94:1) inside popover links. Darkened to #15803d (5.0:1) and #a16207 (4.9:1). - link-name (1): a topic-cluster tutorial with an empty title (abap-environment-create-tile) rendered a nameless link; now falls back to the slug, skipping the entry if both title and slug are empty. - nested-interactive (1): removed `interactive` from the shellbar profile ui5-avatar, which rendered its own role=button nested inside the ShellBar's own "User Menu" profile button. The ShellBar button still fires profile-click (verified live), so login is unaffected. Added VerbFlipTile unit tests for the aria-pressed and back-face focus behavior (41 homepage-explainer tests pass). Hugo build verified: empty-title cluster link now renders its slug, 0 nameless anchors on the homepage.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #1794.
Re-measured the consented homepage with axe-core 4.10.2 (WCAG 2A/2AA) (via
getComputedStylein a CSP-bypassed Playwright context, matching the issue's method) and fixed each content-level failure at its real root cause.What changed
aria-allowed-attr(7)VerbFlipTile.vuebound:aria-pressedon all cards, but the verb tiles render as<a>(role=link) wherearia-pressedis invalidaria-pressedonly in shelf-header (role=button) mode; the link's flip affordance stays inaria-labelscrollable-region-focusable(7).hp-flip__face--backis a real scroll container (measuredscrollHeight 652 > clientHeight 140) but not keyboard-focusable:tabindex="flipped ? 0 : undefined"+ gateoverflow-y:autoon[data-flipped="true"]so the hidden default state isn't a phantom tab stopcolor-contrast(3).hp-popover-link:NEW(white on#16a34a= 3.3:1) ×2 andHIDDEN_GEM(white on#ca8a04= 2.94:1) — incl. "SAP Business Data Cloud"#15803d(5.0:1) and#a16207(4.9:1).--updated/--third_partyalready passedlink-name(1)abap-environment-create-tilehas an emptytitlein the data → nameless linknested-interactive(1)interactiveon the shellbar profileui5-avatarmakes it render its own innerrole=button, nested inside the ShellBar's own "User Menu" profile buttoninteractive. The ShellBar's profile button still exists and firesprofile-click(verified live) — login unaffectedVerification
interactivekeeps the ShellBar profile button andprofile-click(page correctly redirected to/login).VerbFlipTiletests (aria-pressed absent on link / present on button; back face focusable only while flipped). All 41 homepage-explainer tests pass.abap-environment-create-tile, 0 nameless anchors on the homepage; new badge colors present in the compiled CSS.Notes for reviewers
flip-card.cssis bundled into the island by Vite (postbuild:apps), not Hugo's asset pipeline — a full deploy rebuilds it.DEVper the branch model.