feat(plugins): add a11y inspector plugin#44
Merged
Conversation
✅ Deploy Preview for devfra ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
antfubot
changed the title
antfubot
force-pushed
the
feat/a11y-inspector-plugin
branch
from
bcf4e99 to
f973b3c
Compare
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.
Reclassify the accessibility inspector as a first-party plugin: relocate it from examples/a11y-inspector to plugins/a11y, add a plugins/* workspace glob, and rename the package to @devframes/a11y. Updates the turbo tasks, the vitest project entry, and the in-tree path references to match.
antfubot
force-pushed
the
feat/a11y-inspector-plugin
branch
from
f973b3c to
75b7649
Compare
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
2 participants
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 first-party devframe plugin under
plugins/a11y— 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.