test(a11y): playwright coverage for api-explorer - bed-8640 by JayC-Specter · Pull Request #3097 · SpecterOps/BloodHound

JayC-Specter · 2026-08-04T14:56:52Z

Description

Adds accessibility tests for the API Explorer page to verify compliance with accessibility standards.

Motivation and Context

Resolves BED-8640

Why is this change required? What problem does it solve?

This change was needed to ensure the API Explorer page adheres to accessibility standards.

How Has This Been Tested?

The tests were run locally.

Screenshots (optional):

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

I have met the contributing prerequisites
- Assigned myself to this PR
- Added the appropriate labels
- Associated an issue: Issues and Pull Requests README #672
- Read the Contributing guide: https://github.com/SpecterOps/BloodHound/wiki/Contributing
I have ensured that related documentation is up-to-date
- Open API docs
- Code comments (GoDocs / JSDocs)
I have followed proper test practices
- Added/updated tests to cover my changes
- All new and existing tests passed

Summary by CodeRabbit

Tests
- Expanded accessibility coverage for API Explorer’s default, expanded, disabled-resource, empty-filter, and Schemas views.
- Added validation for navigation, filtering, and resource expansion states before accessibility analysis.
- Improved confidence that API Explorer remains accessible and usable across common interactions and UI states.

coderabbitai · 2026-08-04T15:00:12Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 60201e49-7d2b-41b7-a2d6-556e27f2e679

📥 Commits

Reviewing files that changed from the base of the PR and between 47c49de and a3738ea.

📒 Files selected for processing (1)

cmd/ui/tests/a11y/api-explore.a11y.spec.ts

🚧 Files skipped from review as they are similar to previous changes (1)

cmd/ui/tests/a11y/api-explore.a11y.spec.ts

📝 Walkthrough

Walkthrough

The accessibility spec centralizes API Explorer setup and adds separate checks for default, expanded resource, disabled resource, empty-filter, and expanded Schemas states.

Changes

API Explorer accessibility scenarios

Layer / File(s)	Summary
API Explorer states `cmd/ui/tests/a11y/api-explore.a11y.spec.ts`	Moves shared navigation and readiness checks into `beforeEach`. Adds checks for default, expanded resource, and disabled resource states.
Filtered API Explorer states `cmd/ui/tests/a11y/api-explore.a11y.spec.ts`	Adds checks for a nonexistent resource filter and expanded `api.error-detail` schema content.

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

Possibly related PRs

SpecterOps/BloodHound#3085: Adds related Playwright accessibility coverage for Explore UI states.

Suggested reviewers: thenando

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the addition of Playwright accessibility coverage for the API Explorer.
Description check	✅ Passed	The description covers the change, motivation, ticket, testing, change type, and checklist requirements.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch BED-8640-api-explorer-a11y

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.}

JayC-Specter · 2026-08-04T15:12:46Z

@coderabbitai full review

coderabbitai · 2026-08-04T15:12:53Z

✅ Action performed

Full review finished.

JayC-Specter · 2026-08-04T15:15:42Z

All contributors have signed the CLA

TheNando

There are a few issues here I'd like you to address.

TheNando · 2026-08-04T16:58:05Z

    });
+
+    test('expanded resource', async ({ page, makeAxeBuilder }, testInfo) => {
+        await page.goto('/ui/api-explorer');


It will be a common trend that the same page will be revisited at the start. Always be on the lookout for these initial repeated steps and include them in a test.beforeEach.

TheNando · 2026-08-04T16:58:40Z

+        await page.goto('/ui/api-explorer');
+
+        // Wait for the filter input to load
+        await page.getByRole('textbox', { name: 'Filter by tag or path' }).waitFor({ state: 'visible' });


With the beforeEach, you'll be able to remove the repeated steps from the start of each test. It's a marginal change, but an easy win.

TheNando · 2026-08-04T17:01:53Z

+        await page.getByRole('textbox', { name: 'Filter by tag or path' }).waitFor({ state: 'visible' });
+
+        const resourceButton = page.getByTestId('api-explorer').getByRole('button', { name: /^get.*api.*version$/i });
+
+        await resourceButton.click();
+        await expect(resourceButton).toHaveAttribute('aria-expanded', 'true');


Please be on the look out for these assertions. As mentioned before, they solve the issue of getting the test to wait for the state, but it's more expressive of intent to use a 'waitFor' and that should be the common pattern. With the waitFor, you can also target the revealed content which is useful for when there is a loading state. There is not in this case, but it's a good practice.

Suggested change

await page.getByRole('textbox', { name: 'Filter by tag or path' }).waitFor({ state: 'visible' });

const resourceButton = page.getByTestId('api-explorer').getByRole('button', { name: /^get.*api.*version$/i });

await resourceButton.click();

await expect(resourceButton).toHaveAttribute('aria-expanded', 'true');

await page.getByRole('button', { name: 'get /api/version' }).click();

await page.getByText('Returns the supported API versions.').waitFor({ state: 'visible' });

TheNando · 2026-08-04T17:03:15Z

+        const resourceButton = page
+            .getByTestId('api-explorer')
+            .getByRole('button', { name: /^put.*api.*v2.*accept-eula$/i });
+
+        await resourceButton.click();
+        await expect(resourceButton).toHaveAttribute('aria-expanded', 'true');


You'll need to update here. This isn't currently targeting a disabled resource.

Suggested change

const resourceButton = page

.getByTestId('api-explorer')

.getByRole('button', { name: /^put.*api.*v2.*accept-eula$/i });

await resourceButton.click();

await expect(resourceButton).toHaveAttribute('aria-expanded', 'true');

await page.getByRole('button', { name: 'get /api/v2/saml', exact: true }).click();

await page.getByText('Deprecated: This endpoint').waitFor({ state: 'visible' });

TheNando · 2026-08-04T17:05:46Z

+        const schemasButton = page.getByTestId('api-explorer').getByRole('button', { name: 'Schemas' });
+
+        await expect(schemasButton).toHaveAttribute('aria-expanded', 'true');


You are grabbing the button, but not clicking to reveal. I'm not sure how the button has the expanded attribute. Another example of where it would be better to check for revealed content rather than to make an assertion on a clicked state.

Here is what you want to see before you run the axe core check:

See other comments

JayC-Specter self-assigned this Aug 4, 2026

JayC-Specter added enhancement New feature or request user interface A pull request containing changes affecting the UI code. javascript Pull requests that update javascript code labels Aug 4, 2026

bfaulk96 self-requested a review August 4, 2026 15:24

bfaulk96 previously approved these changes Aug 4, 2026

View reviewed changes

TheNando requested changes Aug 4, 2026

View reviewed changes

JayC-Specter and others added 3 commits August 4, 2026 14:56

feat: add API Explorer accessibility coverage

f962576

fix: address API Explorer accessibility review feedback

d1fe604

Update the schema story

a3738ea

TheNando force-pushed the BED-8640-api-explorer-a11y branch from 47c49de to a3738ea Compare August 4, 2026 19:56

TheNando approved these changes Aug 4, 2026

View reviewed changes

TheNando enabled auto-merge (squash) August 4, 2026 20:01

TheNando merged commit 8e24462 into main Aug 4, 2026
14 checks passed

TheNando deleted the BED-8640-api-explorer-a11y branch August 4, 2026 20:08

github-actions Bot locked and limited conversation to collaborators Aug 4, 2026

Navigation Menu

Uh oh!

test(a11y): playwright coverage for api-explorer - bed-8640 - #3097

test(a11y): playwright coverage for api-explorer - bed-8640#3097
TheNando merged 3 commits into
mainfrom
BED-8640-api-explorer-a11y

JayC-Specter commented Aug 4, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Aug 4, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

JayC-Specter commented Aug 4, 2026

Uh oh!

coderabbitai Bot commented Aug 4, 2026 •

edited

Loading

Uh oh!

JayC-Specter commented Aug 4, 2026

Uh oh!

TheNando left a comment

Uh oh!

TheNando Aug 4, 2026

Uh oh!

TheNando Aug 4, 2026

Uh oh!

TheNando Aug 4, 2026 •

edited

Loading

Uh oh!

TheNando Aug 4, 2026

Uh oh!

TheNando Aug 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		const schemasButton = page.getByTestId('api-explorer').getByRole('button', { name: 'Schemas' });

		await expect(schemasButton).toHaveAttribute('aria-expanded', 'true');

Uh oh!

Conversation

JayC-Specter commented Aug 4, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation and Context

How Has This Been Tested?

Screenshots (optional):

Types of changes

Checklist:

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

JayC-Specter commented Aug 4, 2026

Uh oh!

coderabbitai Bot commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JayC-Specter commented Aug 4, 2026

Uh oh!

TheNando left a comment

Choose a reason for hiding this comment

Uh oh!

TheNando Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

TheNando Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

TheNando Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TheNando Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

TheNando Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

JayC-Specter commented Aug 4, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Aug 4, 2026 •

edited

Loading

coderabbitai Bot commented Aug 4, 2026 •

edited

Loading

TheNando Aug 4, 2026 •

edited

Loading