Skip to content

test(webapp): let a page stop moving before axe audits it - #293

Merged
InstaZDLL merged 1 commit into
mainfrom
fix/axe-wait-for-animations
Oct 21, 2026
Merged

InstaZDLL merged 1 commit into
mainfrom
fix/axe-wait-for-animations

Conversation

@InstaZDLL

@InstaZDLL InstaZDLL commented Oct 21, 2026 •

Copy link
Copy Markdown
Owner

Why

The dark theme added by #289 raises each block of a page into view (fe-rise, a 640 ms fade and lift, staggered up to 210 ms). axe reads colours at the instant it looks, so an audit that lands mid-fade measures text at part of its opacity. On /genres it reported #76736d on #0b0b0e (4.15:1), which is --fe-ink-3 (#8e8b83) at about 80 % opacity. The finished page has no such contrast problem.

Locally the genre test failed 5 runs in 8. On main, CI (Web) for the #289 merge (6315eb8) failed with 119 color-contrast entries alongside the label-content-name-mismatch ones that #290 fixed.

What

The 17 inline audits in studio-nocturne.spec.ts were all the same four lines. They are now one helper, expectNoWcagViolations(page), which first waits for every finite animation from document.getAnimations() to finish, then runs the same AxeBuilder with the same tags. Infinite animations, such as the loading skeleton's pulse, are skipped because they never finish. No application code changes.

Verification

  • bun run lint, bun run test (179 passed), bun run build.
  • Genre test with --repeat-each 8, desktop and mobile: 16/16 passed.
  • Inversion: with the wait disabled (getAnimations().slice(0, 0)), the same run fails 11/16, every failure color-contrast.
  • Full suite with --repeat-each 2: 322 passed, 22 skipped (the spec's existing test.skip( calls, twice).

Summary by CodeRabbit

  • Tests
    • Renforcement des contrôles automatisés d’accessibilité sur les principales vues de l’application, notamment les albums, genres, artistes, importations, téléchargements et stations radio.
    • Les vérifications couvrent désormais les critères WCAG 2.0 et 2.1, niveaux A et AA, après la fin des animations afin d’améliorer la fiabilité des résultats.

The dark theme from #289 raises each block of a page into view, fading
it in over 640 ms. axe reads colours at the instant it looks, so an audit
that caught a block mid-fade measured its text at a fraction of its
opacity: the genre test reported a 4.15:1 contrast for a token that
holds well above 4.5:1, failing five runs in eight locally and turning
CI (Web) red on main.

The seventeen audits were the same four lines, now one helper,
expectNoWcagViolations, which first waits for every finite animation to
finish. An infinite one, the pulse of a loading skeleton, would never
settle and is left running.

Signed-off-by: InstaZDLL <github.105mh@8shield.net>
@github-actions github-actions Bot added type: test Tests scope: web Embedded web player (React) and removed type: test Tests labels Oct 21, 2026
@coderabbitai

coderabbitai Bot commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Repository: InstaZDLL/waveflow-server/.coderabbit.yaml
  • Review profile: ASSERTIVE
  • Plan: Advanced
  • Run ID: 9bbf8791-1024-4dc5-a2ee-4bb74cb68d3a
📥 Commits

Reviewing files that changed from the base of the PR and between 0ee23ce and af8eba9.

📒 Files selected for processing: 1
  • webapp/e2e/studio-nocturne.spec.ts

Limit details: You’ve used all 4 included reviews currently available. Your 69 included PR review attempts over the past 7 days set your current allowance at 4 reviews per hour.

📝 Walkthrough

Les tests E2E concernés utilisent un helper commun qui attend la fin des animations finies, lance un audit Axe avec les tags WCAG indiqués et exige l’absence de violations.

Changes: Audits d’accessibilité E2E

Couche / Fichier(s) Résumé
Helper d’audit WCAG
webapp/e2e/studio-nocturne.spec.ts
Ajout de expectNoWcagViolations. Le helper attend la fin des animations finies, exécute l’audit Axe et exige zéro violation.
Utilisation dans les tests
webapp/e2e/studio-nocturne.spec.ts
Les contrôles d’accessibilité des vues Albums, Genres, Artistes, Import, Correction, Upload, Canvas, Scrobbling, navigation mobile, paroles et stations radio utilisent le helper.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Other

Merge Risk: ⚪ Minimal · up to af8eb

The change stabilizes the affected accessibility audits without introducing an established merge-blocking risk.

Pre-merge checks: Passed 4 · Failed 1

Failed Failed checks: 1 warning

Check name Status Explanation Resolution
Docstring Coverage Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 1 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed Passed checks: 4 passed
Check name Status Explanation
Title check Passed Le titre décrit clairement le changement principal : attendre l’arrêt des animations avant les audits Axe.
Description check Passed La description explique la cause, le changement et les vérifications réalisées. Elle couvre les informations attendues, même si elle utilise les sections « Why », « What » et « Verification » au lieu …
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Description check

Explanation

La description explique la cause, le changement et les vérifications réalisées. Elle couvre les informations attendues, même si elle utilise les sections « Why », « What » et « Verification » au lieu des sections du modèle et ne reprend pas la liste de cases à cocher du plan de test.

✨ Finishing Touches: 💡 1
📝 Generate docstrings: 💡
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Some tools did not complete. Review the errors below.

🔧 Biome (2.5.14)
webapp/e2e/studio-nocturne.spec.ts

Biome could not lint this file: nested root configuration. Check the repository's Biome configuration and plugins.

Usage-based review receipt

Note

This review was completed with usage-based billing: files reviewed beyond your plan's included limits are billed at $0.25/file. View usage-based billing.

Comment @coderabbitai help to get the list of available commands.

@github-actions github-actions Bot added the size: m 50-200 lines label Oct 21, 2026
@InstaZDLL InstaZDLL self-assigned this Oct 21, 2026
@github-actions github-actions Bot added the type: test Tests label Oct 21, 2026
@InstaZDLL
InstaZDLL merged commit 86b82b2 into main Oct 21, 2026
16 checks passed
@InstaZDLL
InstaZDLL deleted the fix/axe-wait-for-animations branch October 21, 2026 01:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: web Embedded web player (React) size: m 50-200 lines type: test Tests

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant