feat(a11y): rework inspector (routes, dashboard, pins, config) + message→dock navigation#134
Merged
Conversation
Add an optional `actions` field to `DevframeMessageEntry` (a discriminated union, `activate` implemented) so a message can request the viewer switch its focused dock, deep-linking via the existing `hub:docks:activate` primitive. The messages panel renders the actions in the detail pane and only when a hub docks-activate capability is present, so standalone panels show no dead buttons. Co-authored-with an agent.
…nfig Rework the a11y inspector to track violations per route, present them through a Dashboard + grouped Violations tab, and highlight with a preview ring plus pinned, numbered badges (root-element targets get a corner notice). The agent detects routes framework-neutrally (History-API patch + popstate/hashchange), persists its route→report map in sessionStorage, broadens the axe tag set to WCAG 2.0–2.2 + best-practice (tagged and filterable), adds interaction-driven auto-scan, and logs newly-appeared violations to the console. Author options (auto-scan, logging, default-highlight, axe tags/options) flow through `get-config` to the panel, which forwards the runtime slice to the agent over the BroadcastChannel. Each mirrored messages-feed entry carries a navigation action back to the deep-linked rule/route, and the panel honours dock activations from other docks. Co-authored-with an agent.
✅ Deploy Preview for devfra ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Add a focused hub example that pairs the a11y and messages plugins over an intentionally-broken, multi-route app under test. It exercises live axe scanning, per-route tracking (History-API navigation), pin/highlight, and the message→dock navigation feature end to end: a11y scan messages carry actions that activate the a11y dock deep-linked to the offending rule + route. Mirrors the minimal-vite-devframe-hub host shape, trimmed to the two plugins. Co-authored-with an agent.
- Collapse the Dashboard/Violations tabs into one scrolling page: a sticky summary band (severity chips + counts + auto-scan/best-practice/clear controls) over the grouped, per-route violation list. - Tighten the violation rows, chips, and group headers for a denser list. - Fix icon rendering: pair every icon with a companion utility class (and mark it aria-hidden), matching how @antfu/design renders icons — a bare single-class `i-ph-*` span isn't extracted by UnoCSS, so Rescan/pin/clear icons were blank. - Show the messages-feed entries under a short `a11y` category instead of the `devframes_plugin_a11y` dock id. Co-authored-with an agent.
- Highlighting is now driven by selecting a violation (a checkbox on each rule card) rather than clicking inner elements. Selected cards get a distinct visual state and draw globally-numbered badges over all their elements. - Add a 'Generate fix prompts' nav button that opens an accessible dialog with a single paste-ready AI prompt gathering the selected violations' context — rule metadata, WCAG tags, docs, and each element's selector/markup/failure summary, grouped by route — with a copy button. Co-authored-with an agent.
- Use i-ph-person-simple-circle-duotone as the single a11y icon everywhere (dock definition, panel brand, and the playground rail/header). - Hovering (or focusing) a summary severity chip now previews every element of that impact in the page, restoring the selection highlight on leave. Co-authored-with an agent.
Resolve the messages-plugin refactor (main split App.vue/MessagesView.vue into MessageList/MessageDetail/MessageFilterBar + useMessageFilters and removed src/types.ts): re-apply the message->dock navigation onto the new components — canActivate probe + onActivate in App.vue, threaded through MessagesView to the new MessageDetail, which renders the action buttons. Types now come from @devframes/hub/types. Regenerate the tsnapi API snapshots against the merged build.
- Split the multi-component files (header/violations/icons/summary/fix-prompts) into one component per file: Header, MetaLine, Summary, SummaryBar, Switch, EmptyState, ViolationRow, RouteGroup, ViolationList, FixPromptsDialog. Shared view types + helpers move to lib/violation-view.ts. - Replace the ~920-line bespoke styles.css with UnoCSS utilities built on @antfu/design semantic tokens (bg-base/color-muted/border-base/…). The one domain color (WCAG severity) rides an inline --impact CSS var consumed by arbitrary-value utilities. styles.css now only carries the root reset, scrollbar, and reduced-motion guard. - Add a Storybook story for every component. Co-authored-with an agent.
Add selection controls to the summary bar: a Select all / Unselect all toggle (over the currently-visible, filtered violations) and a Clear selection action (clears the whole selection, including any hidden by the filter) with a live count. Selecting drives the in-page highlight + the fix-prompt set as before. Co-authored-with an agent.
Replace the select-all/unselect-all toggle with three distinct actions: Select all (visible), Invert (flip each visible violation's selected state), and Clear selection.
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.
Reworks
@devframes/plugin-a11y— taking cues fromnuxt/a11y— onto the plugin's existing Solid + BroadcastChannel-first architecture, and adds a reusable "click a message to navigate to a dock" capability to the hub + messages plugin.a11y inspector rework
location.pathname, detected framework-neutrally (History-API patch +popstate/hashchange); the agent owns the authoritative route→report map, persisted insessionStorage, and broadcasts the whole aggregate so the panel is a pure render.<html>/<body>get a corner notice instead of a viewport ring. Pins clear on route change;defaultHighlightsets the initial state.MutationObserverplus debounced mouse/keyboard/touch rescans, toggleable (persisted per tab).createA11yDevframe({ autoScan, logIssues, defaultHighlight, axe })flows throughget-configto the panel, which forwards the runtime slice to the agent over the channel (agent stays RPC-free).Message → dock navigation
actionsfield toDevframeMessageEntry(a discriminated union;activateimplemented) built on the existinghub:docks:activateprimitive.Verification
pnpm lint,pnpm typecheck(19/19),pnpm build, and the affected test suites (a11y, messages, hub, API-export snapshots) all pass. New Storybook stories cover the Dashboard and grouped Violations; new vitest coverage for the route/config/protocol logic and the navigation actions.This PR was created with the help of an agent.
Example playground (
examples/a11y-messages-playground)Adds a focused hub example that pairs the a11y + messages plugins over an intentionally-broken, multi-route app under test, so the whole rework — live scanning, per-route tracking, pin/highlight, and message→dock navigation — can be exercised end to end. Mirrors the
minimal-vite-devframe-hubhost shape, trimmed to the two plugins; run withpnpm --filter a11y-messages-playground dev.