Skip to content

fix(a11y): resolve homepage axe WCAG A/AA violations (#1794) - #1809

Merged
jung-thomas merged 1 commit into
DEVfrom
worktree-homepage-a11y-1794
Aug 15, 2026
Merged

jung-thomas merged 1 commit into
DEVfrom
worktree-homepage-a11y-1794

Conversation

@jung-thomas

Copy link
Copy Markdown
Contributor

Fixes #1794.

Re-measured the consented homepage with axe-core 4.10.2 (WCAG 2A/2AA) (via getComputedStyle in a CSP-bypassed Playwright context, matching the issue's method) and fixed each content-level failure at its real root cause.

What changed

Rule Root cause (grounded in live DOM) Fix
aria-allowed-attr (7) VerbFlipTile.vue bound :aria-pressed on all cards, but the verb tiles render as <a> (role=link) where aria-pressed is invalid Bind aria-pressed only in shelf-header (role=button) mode; the link's flip affordance stays in aria-label
scrollable-region-focusable (7) .hp-flip__face--back is a real scroll container (measured scrollHeight 652 > clientHeight 140) but not keyboard-focusable :tabindex="flipped ? 0 : undefined" + gate overflow-y:auto on [data-flipped="true"] so the hidden default state isn't a phantom tab stop
color-contrast (3) The failing nodes are the badges inside .hp-popover-link: NEW (white on #16a34a = 3.3:1) ×2 and HIDDEN_GEM (white on #ca8a04 = 2.94:1) — incl. "SAP Business Data Cloud" Darken to #15803d (5.0:1) and #a16207 (4.9:1). --updated/--third_party already passed
link-name (1) Topic-cluster tutorial abap-environment-create-tile has an empty title in the data → nameless link Fall back to the slug for the visible text; skip the entry if title and slug are empty
nested-interactive (1) interactive on the shellbar profile ui5-avatar makes it render its own inner role=button, nested inside the ShellBar's own "User Menu" profile button Remove interactive. The ShellBar's profile button still exists and fires profile-click (verified live) — login unaffected

aria-valid-attr on #consent_blackbar is the TrustArc banner (third-party), tracked separately in #1796 — not touched here.

Verification

  • Live grounding: a hand-rolled contrast scan of the consented homepage reproduced exactly the 3 badge failures the issue reported; a live shadow-DOM test confirmed removing interactive keeps the ShellBar profile button and profile-click (page correctly redirected to /login).
  • Unit tests: added 4 VerbFlipTile tests (aria-pressed absent on link / present on button; back face focusable only while flipped). All 41 homepage-explainer tests pass.
  • Hugo build: succeeds; the previously-empty cluster link now renders abap-environment-create-tile, 0 nameless anchors on the homepage; new badge colors present in the compiled CSS.

Notes for reviewers

  • flip-card.css is bundled into the island by Vite (postbuild:apps), not Hugo's asset pipeline — a full deploy rebuilds it.
  • Base is DEV per the branch model.

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.
@jung-thomas
jung-thomas merged commit e1be4eb into DEV Aug 15, 2026
3 of 4 checks passed
@jung-thomas
jung-thomas deleted the worktree-homepage-a11y-1794 branch August 15, 2026 13:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant