Skip to content

account.spec.ts narrow-viewport coverage + a11y fix (#113), login.spec.ts hover/focus/disabled/loading coverage (#114) - #115

Merged
Xore merged 1 commit into
mainfrom
fix/113-114-account-narrow-viewport-and-state-coverage
Aug 15, 2026
Merged

Xore merged 1 commit into
mainfrom
fix/113-114-account-narrow-viewport-and-state-coverage

Conversation

@Xore

@Xore Xore commented Aug 15, 2026

Copy link
Copy Markdown
Owner

Summary — #113

  • account.spec.ts previously skipped every project but desktop-1440 outright: below ~820px the sidebar nav collapses behind a hamburger toggle these tests never drove, so nav text was present in the DOM but hidden off-canvas -- a 30s timeout per test that blew CI's 15-minute regression-job budget once this file entered the project matrix.
  • Added openSidebarNav()/closeSidebarNavIfOpen() and wired them into every describe block that navigates via the sidebar. "Personal info"'s own screenshot tests stay desktop-1440-only -- they already manage their own explicit viewport contexts (a real redundancy concern, not the hamburger gap), the WCAG check does not (it needs to run at every width, since that's where the real bug lives).
  • Un-skipping the suite surfaced two further narrow-only collapse patterns, both now handled: the masthead's user-menu options move into its own kebab below lg, and each credential row's own action (e.g. "Set up Authenticator application") moves into a per-row kebab the same way.
  • Fixed the actual bug account.spec.ts: narrow-viewport (tablet-820/mobile-390/iphone-393) runs fail; account console has a real button-name a11y gap at mobile-390/iphone-393 #113 was filed for: a critical WCAG button-name violation at mobile-390/iphone-393 on an icon-only "more actions" kebab (pf-v5-c-menu-toggle.pf-m-plain) with no aria-label, no text, no aria-labelledby. This is compiled upstream PatternFly/React markup, so it's patched post-render via a new xore-account.js (theme.properties' scripts=, mirroring the login theme's own xore-auth.js) that labels every instance of the pattern via a MutationObserver -- found live that the same unlabeled-kebab pattern also exists per-credential-row, not just at the masthead, so it targets the class rather than one specific data-testid.
  • Also fixed a real bug in the screenshot baselines themselves: selecting a nav item doesn't auto-close the drawer here, so a screenshot taken right after navigating (without an explicit close) captured the open drawer sitting on top of the actual page content it was meant to verify.

Summary — #114

#91's own acceptance criteria calls for "hover, focus, disabled, loading" state coverage; none of the four had explicit, intentional coverage before this.

  • Primary/secondary button hover + keyboard-focus: computed-style assertions via toHaveCSS (not a bare evaluate() read, which raced login.css's own background-color transition and flaked).
  • Disabled: a real network-delayed submit (page.route holding the login-actions/authenticate POST) to catch the button disabled mid-flight -- Playwright's own locator actions wait for in-flight navigation to settle before running at all, so both the click and the disabled-read happen inside one page.evaluate() to avoid deadlocking against the held request.
  • Loading/busy: extended the existing stateful WebAuthn registration ceremony test with a check that aria-busy/.kc-busy (xore-auth.js's own click listener) apply synchronously the instant the ceremony starts, read the same single-evaluate() way so it can't race the ceremony itself resolving.

Test plan

  • account.spec.ts run across all 6 projects: only the 2 pre-existing font-rendering screenshot diffs remain (present before any of these changes, unrelated to them) -- everything else passes, including every newly-unskipped test.
  • login.spec.ts run across all 6 projects: only pre-existing font-rendering/timestamp screenshot noise remains -- every #114 test and the modified WebAuthn test pass cleanly on every project.
  • New narrow/wide-viewport baseline screenshots reviewed by eye (kebab menus open correctly, drawer closed before the shot, real content visible).

…button-name a11y gap (#113)

login.spec.ts: hover/focus/disabled/loading state coverage (#114)

#113: account.spec.ts previously skipped every project but desktop-1440
outright, because below ~820px the sidebar nav collapses behind a
hamburger toggle these tests never drove -- nav text was present in the
DOM but hidden off-canvas, timing out at 30s per test and blowing CI's
15-minute regression budget once this file entered the project matrix.
Added openSidebarNav()/closeSidebarNavIfOpen() and wired them into every
describe block that navigates via the sidebar; the "Personal info"
screenshot tests stay desktop-1440-only since they already manage their
own explicit viewport contexts (a real redundancy concern, not the
hamburger gap). Un-skipping the suite surfaced two further narrow-only
UI collapse patterns (both now handled): the masthead's user-menu options
move into its own kebab below `lg`, and each credential row's own action
(e.g. "Set up Authenticator application") moves into a per-row kebab the
same way.

Also fixed the real bug #113 was filed for: a critical WCAG button-name
violation at mobile-390/iphone-393 on an icon-only "more actions" kebab
button (`pf-v5-c-menu-toggle.pf-m-plain`) with no aria-label, no text,
and no aria-labelledby -- present at the masthead level and, found while
fixing the above, per-credential-row too. Compiled upstream PatternFly/
React markup, so patched post-render via a new xore-account.js
(theme.properties' `scripts=`, mirroring the login theme's own
xore-auth.js) that labels every instance of the pattern via a
MutationObserver, not just the one axe happened to visit.

#114 (#91's own acceptance criteria: "hover, focus, disabled, loading"
state coverage, never explicitly covered): added primary/secondary
button hover+focus computed-style assertions (toHaveCSS, not a bare
evaluate() read, to avoid racing login.css's own background-color
transition), a real network-delayed submit to catch the button disabled
mid-flight, and a busy-state check on the WebAuthn registration ceremony
(aria-busy/.kc-busy applied synchronously by xore-auth.js's own click
listener, checked via a single page.evaluate() click+read so it can't
race the ceremony itself resolving).
@Xore
Xore merged commit 8e8fb77 into main Aug 15, 2026
2 checks passed
@Xore
Xore deleted the fix/113-114-account-narrow-viewport-and-state-coverage branch August 15, 2026 00:56
Xore added a commit that referenced this pull request Aug 15, 2026
…116)

* account.spec.ts: mask the live "Created" timestamp in the signing-in screenshot

The Theme CI workflow started failing on main after PR #115 merged: the
new mobile-390/iphone-393 account-signing-in.png baselines (generated
locally) bake in the password credential's real "Created <timestamp>"
line, which reflects whenever that realm/user was actually provisioned
-- different every CI run against the disposable Keycloak fixture, and
different again from whatever moment the baseline itself was captured.
CI failed with an ~8000-pixel diff, entirely the timestamp string's own
length/wrap shifting the layout after it.

Mask [data-testrole="created-at"] instead of asserting on it -- its
exact value was never what this screenshot exists to verify. Regenerated
all six masked baselines against a fresh disposable Keycloak.

* account.spec.ts: use CI-rendered baselines for signing-in at mobile-390/iphone-393

The mask fix alone wasn't enough -- CI still failed with an ~8000-pixel
diff, but this time every glyph on the page showed as different in the
diff overlay, not just the (now-masked) timestamp region: my local
sandbox's font rendering doesn't produce pixel-identical text to GitHub
Actions' own Ubuntu runner, even for the same font files. A baseline
captured locally can never match CI's render for a text-heavy page like
this one.

Pulled the actual CI-rendered screenshots straight from the failed run's
playwright-report artifact (run 31856507193) and committed those as the
baseline instead of re-capturing locally. tablet-820/uhq-1920/uhd-3840's
signing-in baselines and every Applications baseline weren't flagged by
either CI run, so they're left alone -- this environment mismatch
apparently doesn't cross the 2% diff threshold for those, just this
particular text-dense page at these two narrower widths.
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