feat(examples): add a11y inspector plugin#3
Closed
antfubot wants to merge 1 commit into
Closed
Conversation
A devframe example that audits a host application for accessibility issues. axe-core scans the live page, a Solid SPA lists the WCAG A/AA violations grouped by severity, and hovering a warning highlights the offending element in the page (scrolling it into view when off-screen). The injected agent (host page) and the panel (devtools iframe) talk over a same-origin BroadcastChannel rather than the devframe backend, so the scan + highlight loop behaves identically whether the plugin runs as a dev server (WebSocket RPC) or a baked static build. The get-config RPC carries the impact taxonomy — live in dev, from the baked dump in a build. Ships a same-origin demo (intentional a11y bugs + docked panel) for both modes, plus dev-server and static-build tests.
Owner
Author
|
Superseded by devframes#44 (opened against upstream instead). Closing. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
A new devframe example — A11y Inspector — that audits a host application for accessibility issues:
How it stays mode-agnostic
devframe deliberately exposes no access to the host app's DOM, so the plugin ships its own bridge:
src/inject) loaded into the host page (axe scan + highlight overlay),src/client) in the devtools iframe,get-configRPC) for the impact taxonomy.The agent and panel communicate over a same-origin
BroadcastChannel, not the devframe backend — so the scan + highlight loop works identically whether the plugin runs as a dev server (WebSocket RPC) or a baked static build.get-configis astaticRPC, resolving live in dev and from the baked dump in a build. A same-origin demo (demo/) exercises both modes against an intentionally-broken page with a docked panel.Note on the framework
The request was for SolidStart. SolidStart runs on Vinxi, which pins Vite 6, conflicting with this Vite-8 monorepo (and the shared source-alias map) and making the relative-base, mount-portable SPA output devframe expects hard to produce.
vite-plugin-solidsupports Vite 8 cleanly, so the panel is built with Solid + Vite — the same Solid component code, without the incompatible toolchain wrapper. This was confirmed with the requester before implementing.Verification
dev-servertest: serves the SPA + connection meta, answersget-configover WebSocket RPC.static-buildtest: relative-asset SPA copy,backend: staticmeta,get-configbaked into the RPC dump.Catalog deps added:
solid-js,axe-core(frontend),vite-plugin-solid(build). Wired intoturbo.jsonand the vitestprojectslist.This PR was created with the help of an agent.