Skip to content

Accessibility tests#259

Merged
yamcodes merged 7 commits intomainfrom
55-add-accessibility-tests
Nov 2, 2025
Merged

Accessibility tests#259
yamcodes merged 7 commits intomainfrom
55-add-accessibility-tests

Conversation

@yamcodes
Copy link
Owner

@yamcodes yamcodes commented Nov 2, 2025

Closes #55

Note, before merging, we MUST create tickets for each TODO that we have here.

Summary by CodeRabbit

  • Tests

    • Redesigned accessibility testing suite with enhanced smoke tests across key pages, validating heading hierarchy, keyboard navigation, landmarks, color contrast, and semantic structure.
    • Added testing utility to streamline accessibility scanning and violation reporting.
  • Chores

    • Increased CI pipeline timeout to accommodate extended test execution.

@yamcodes yamcodes linked an issue Nov 2, 2025 that may be closed by this pull request
@changeset-bot
Copy link

changeset-bot bot commented Nov 2, 2025

⚠️ No Changeset found

Latest commit: 9b08076

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel
Copy link

vercel bot commented Nov 2, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
arkenv Ready Ready Preview Comment Nov 2, 2025 8:53pm

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 2, 2025

Warning

Rate limit exceeded

@yamcodes has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 19 minutes and 11 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 0139741 and 9b08076.

📒 Files selected for processing (1)
  • tooling/playwright-www/tests/utils/a11y.ts (1 hunks)

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

The PR replaces the old accessibility test suite with a new smoke test implementation. It deletes accessibility.test.ts, introduces a new a11y.test.ts test suite covering top-level routes with landmark, heading, keyboard navigation, and color-contrast checks, adds a helper utility module utils/a11y.ts for axe-core integration, and increases the test-e2e timeout from 14 to 18 minutes.

Changes

Cohort / File(s) Change Summary
Old test suite removal
tooling/playwright-www/tests/accessibility.test.ts
Deleted comprehensive Playwright accessibility test suite covering heading hierarchy, button labels, keyboard navigation, ARIA attributes, form labeling, color contrast, semantic HTML, alt attributes, page titles, meta descriptions, and console error checks.
New accessibility smoke test suite
tooling/playwright-www/tests/a11y.test.ts
Added comprehensive accessibility smoke test suite for 8 predefined routes. Tests landmark verification, heading hierarchy, page titles, skip links, color contrast (via Axe, wcag2a/2aa/21aa), keyboard navigation (Tab simulation), global navigation validation, semantic HTML structure, and a11y violations using disabled rules. Routes tested: /, /docs, /docs/quickstart, /docs/examples, /docs/morphs, and integration/how-to docs.
Accessibility test helper utility
tooling/playwright-www/tests/utils/a11y.ts
Added new utility module providing assertNoA11yViolations() function and AxeScanOptions interface for axe-core integration. Implements violation categorization (critical/serious vs. moderate/minor), formatting utilities, and allowlist support for known violations.
Test timeout configuration
.github/workflows/tests.yml
Updated test-e2e job timeout from 14 to 18 minutes to accommodate expanded test coverage.

Sequence Diagram

sequenceDiagram
    participant Test as a11y.test.ts
    participant Page as Playwright<br/>Page
    participant AxeBuilder as Axe Scanner
    participant Utils as a11y.ts Utils

    loop For each predefined route
        Test->>Page: Navigate to route
        Page->>Page: Wait for networkidle
        
        Test->>Test: Verify landmarks (main, nav)
        Test->>Test: Verify heading hierarchy (h1-h6)
        Test->>Test: Verify page title
        Test->>Test: Check skip links (optional)
        
        Test->>AxeBuilder: Create scanner (wcag2a/2aa/21aa)
        AxeBuilder->>AxeBuilder: Scan page
        Test->>Utils: assertNoA11yViolations(page, options)
        
        Utils->>AxeBuilder: Analyze violations
        AxeBuilder-->>Utils: Returns violations list
        
        alt Critical/Serious violations exist
            Utils->>Utils: Format violation details
            Utils-->>Test: ❌ Throw error
        else Moderate/Minor violations not in allowlist
            Utils->>Utils: Format unallowed violations
            Utils-->>Test: ❌ Throw error with guidance
        else All violations allowed
            Utils-->>Test: ✓ Pass
        end
        
        Test->>Test: Verify keyboard navigation (Tab through)
        Test->>Test: Verify global nav presence & links
        Test->>Test: Verify semantic HTML elements
    end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

  • a11y.test.ts: Route-driven test logic with multiple conditional assertions (landmarks, heading hierarchy, keyboard simulation) requires careful validation of test coverage and assertions per route.
  • utils/a11y.ts: Axe integration with violation categorization (critical/serious vs. moderate/minor) and allowlist logic needs review for correctness of error handling and formatting.
  • Configuration change: Straightforward timeout adjustment; verify 18 minutes is sufficient for expanded suite.

Possibly related PRs

No directly related PRs identified with strong code-level connections beyond this change.

Poem

🐰 A11y tests now hop and play,
On every route, they scan all day,
From axe to tab, from landmark true,
Accessibility shines right through! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The title "Accessibility tests" directly and clearly summarizes the main change in the pull request. The PR introduces comprehensive accessibility testing capabilities by adding a new smoke test suite (a11y.test.ts) with supporting utilities (a11y.ts), and refactors existing accessibility tests. The title is concise, specific enough to understand the primary change when scanning history, and avoids vague terminology.
Linked Issues Check ✅ Passed The linked issue #55 requests "Add a11y tests for the www app." The pull request fulfills this requirement by introducing a comprehensive new accessibility test suite in a11y.test.ts that covers landmark verification, heading hierarchy, page titles, skip links, color contrast, keyboard navigation, global navigation, a11y violations, and semantic HTML across all top-level routes. Supporting utilities are added in a11y.ts to integrate axe-core scanning capabilities. The changes directly address the core objective of adding accessibility tests for the www application.
Out of Scope Changes Check ✅ Passed All changes in the pull request are directly related to implementing accessibility tests. The new a11y.test.ts and a11y.ts files introduce the requested test suite, the deletion of accessibility.test.ts represents a refactoring of existing tests into the new framework, and the workflow timeout increase from 14 to 18 minutes is a necessary adjustment to accommodate the new test execution time. No unrelated or extraneous changes are present in the changeset.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

@github-actions github-actions bot added the tests This issue or PR is about adding, removing or changing tests label Nov 2, 2025
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (3)
tooling/playwright-www/tests/homepage.test.ts (1)

207-221: Consider consolidating duplicated accessibility tests.

This test appears to duplicate the homepage accessibility test in tooling/playwright-www/tests/accessibility.test.ts (lines 168-184). Both tests navigate to "/" and run identical accessibility checks with the same disabled rules.

Consider one of these approaches:

  1. Remove this test and rely on the more comprehensive test in accessibility.test.ts
  2. Keep only this test and remove the one from accessibility.test.ts
  3. If both are intentionally separate, add a comment explaining why (e.g., one for quick feedback in homepage suite, one for comprehensive accessibility suite)
tooling/playwright-www/tests/accessibility.test.ts (1)

186-220: Consider consolidating duplicated docs accessibility tests.

This test overlaps significantly with the accessibility tests in tooling/playwright-www/tests/docs-navigation.test.ts:

  • Lines 183-214 test main docs pages (/docs, /docs/quickstart, /docs/examples, /docs/morphs)
  • Lines 216-242 test integration pages (/docs/integrations/vscode, /docs/integrations/jetbrains)

The main difference is this test includes additional pages (/docs/how-to/load-environment-variables) and uses slightly different disabled rules.

Consider consolidating into a single comprehensive test location to reduce maintenance burden and test execution time, or document why both test locations are intentionally maintained.

tooling/playwright-www/tests/quickstart.test.ts (1)

183-203: Consider consolidating duplicated quickstart accessibility tests.

The /docs/quickstart page is tested for accessibility violations in three different locations:

  1. Here in quickstart.test.ts (lines 183-203)
  2. docs-navigation.test.ts (lines 183-214, iterates over main docs pages)
  3. accessibility.test.ts (lines 186-220, iterates over all docs pages)

All three use the same or similar disabled rules.

Consider consolidating to reduce duplication and test execution time. If separate tests are intentional (e.g., per-page suite vs. comprehensive suite), add a comment explaining the strategy.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f1f3c5e and 6bb0eb4.

📒 Files selected for processing (5)
  • tooling/playwright-www/tests/accessibility.test.ts (2 hunks)
  • tooling/playwright-www/tests/docs-navigation.test.ts (2 hunks)
  • tooling/playwright-www/tests/homepage.test.ts (2 hunks)
  • tooling/playwright-www/tests/quickstart.test.ts (2 hunks)
  • tooling/playwright-www/tests/utils/accessibility.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.test.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.test.ts: Place tests alongside source files and use the .test.ts suffix (e.g., create-env.test.ts, types.test.ts, errors.test.ts, utils.test.ts)
Use Vitest's describe/it structure in tests
Test both success and failure cases for environment validation and utilities
Mock process.env to cover different environment scenarios in tests
In tests, save and restore process.env in setup/teardown (beforeEach/afterEach) to avoid leakage between cases
Verify both runtime behavior and TypeScript types in tests

Files:

  • tooling/playwright-www/tests/docs-navigation.test.ts
  • tooling/playwright-www/tests/homepage.test.ts
  • tooling/playwright-www/tests/accessibility.test.ts
  • tooling/playwright-www/tests/quickstart.test.ts
🧠 Learnings (3)
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : Test both success and failure cases for environment validation and utilities

Applied to files:

  • tooling/playwright-www/tests/docs-navigation.test.ts
  • tooling/playwright-www/tests/homepage.test.ts
  • tooling/playwright-www/tests/quickstart.test.ts
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : Verify both runtime behavior and TypeScript types in tests

Applied to files:

  • tooling/playwright-www/tests/quickstart.test.ts
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : Use Vitest's describe/it structure in tests

Applied to files:

  • tooling/playwright-www/tests/quickstart.test.ts
🧬 Code graph analysis (4)
tooling/playwright-www/tests/docs-navigation.test.ts (1)
tooling/playwright-www/tests/utils/accessibility.ts (1)
  • assertNoAccessibilityViolations (49-114)
tooling/playwright-www/tests/homepage.test.ts (1)
tooling/playwright-www/tests/utils/accessibility.ts (1)
  • assertNoAccessibilityViolations (49-114)
tooling/playwright-www/tests/accessibility.test.ts (1)
tooling/playwright-www/tests/utils/accessibility.ts (1)
  • assertNoAccessibilityViolations (49-114)
tooling/playwright-www/tests/quickstart.test.ts (1)
tooling/playwright-www/tests/utils/accessibility.ts (1)
  • assertNoAccessibilityViolations (49-114)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: test-e2e
🔇 Additional comments (8)
tooling/playwright-www/tests/utils/accessibility.ts (3)

4-13: LGTM! Well-defined interface with clear documentation.

The AxeScanOptions interface provides a clean API for configuring accessibility scans with sensible defaults and clear documentation.


20-38: LGTM! Clear formatting helper.

The violation formatting logic provides helpful error messages with impact levels and node details.


49-114: LGTM! Solid implementation with appropriate violation gating.

The function correctly separates critical/serious violations (which always fail) from moderate/minor violations (which can be explicitly allowed). The logic flow is clear and the error messages are helpful.

tooling/playwright-www/tests/homepage.test.ts (1)

2-2: LGTM! Correct import of accessibility utility.

tooling/playwright-www/tests/accessibility.test.ts (1)

3-3: LGTM! Correct import of accessibility utility.

tooling/playwright-www/tests/quickstart.test.ts (1)

2-2: LGTM! Correct import of accessibility utility.

tooling/playwright-www/tests/docs-navigation.test.ts (2)

2-2: LGTM! Correct import of accessibility utility.


216-242: LGTM! Appropriate rule configuration for integration pages.

The test correctly omits scrollable-region-focusable from the disabled rules for integration pages, likely because these pages have different content structure than docs pages with code blocks.

@github-actions github-actions bot added the github actions Pull requests that update GitHub Actions code label Nov 2, 2025
Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the final PR Bugbot will review for you during this billing cycle

Your free Bugbot reviews will reset on December 26

Details

You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

…ject. This includes deleting the accessibility test files for the homepage, documentation, and quickstart pages, as well as the utility functions used for accessibility assertions.
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b8271e1 and 0139741.

📒 Files selected for processing (4)
  • .github/workflows/tests.yml (1 hunks)
  • tooling/playwright-www/tests/a11y.test.ts (1 hunks)
  • tooling/playwright-www/tests/accessibility.test.ts (0 hunks)
  • tooling/playwright-www/tests/utils/a11y.ts (1 hunks)
💤 Files with no reviewable changes (1)
  • tooling/playwright-www/tests/accessibility.test.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • .github/workflows/tests.yml
🧰 Additional context used
📓 Path-based instructions (1)
**/*.test.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.test.ts: Place tests alongside source files and use the .test.ts suffix (e.g., create-env.test.ts, types.test.ts, errors.test.ts, utils.test.ts)
Use Vitest's describe/it structure in tests
Test both success and failure cases for environment validation and utilities
Mock process.env to cover different environment scenarios in tests
In tests, save and restore process.env in setup/teardown (beforeEach/afterEach) to avoid leakage between cases
Verify both runtime behavior and TypeScript types in tests

Files:

  • tooling/playwright-www/tests/a11y.test.ts
🧠 Learnings (2)
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : Test both success and failure cases for environment validation and utilities

Applied to files:

  • tooling/playwright-www/tests/a11y.test.ts
📚 Learning: 2025-09-12T06:23:45.463Z
Learnt from: CR
Repo: yamcodes/arkenv PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T06:23:45.463Z
Learning: Applies to **/*.test.ts : Verify both runtime behavior and TypeScript types in tests

Applied to files:

  • tooling/playwright-www/tests/a11y.test.ts
🧬 Code graph analysis (2)
tooling/playwright-www/tests/utils/a11y.ts (1)
tooling/playwright-www/tests/accessibility.test.ts (7)
  • test (5-288)
  • page (167-191)
  • page (206-258)
  • violation (184-186)
  • violation (176-176)
  • page (148-165)
  • page (193-204)
tooling/playwright-www/tests/a11y.test.ts (1)
tooling/playwright-www/tests/utils/a11y.ts (1)
  • assertNoA11yViolations (49-114)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: test-e2e

…rt for violations without impact ratings, ensuring they are treated as failures unless explicitly allowed. Updated ImpactLevel type to include null and undefined.
@yamcodes yamcodes merged commit 23e2082 into main Nov 2, 2025
14 checks passed
@yamcodes yamcodes deleted the 55-add-accessibility-tests branch November 2, 2025 21:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

github actions Pull requests that update GitHub Actions code tests This issue or PR is about adding, removing or changing tests

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add accessibility tests

1 participant