Skip to content

STU-374: Build shared accessible controls and modal behavior - #79

Closed
sgardoll wants to merge 12 commits into
mainfrom
sgardoll/stu-374-build-shared-accessible-controls-and-modal-behavior-for-the
Closed

sgardoll wants to merge 12 commits into
mainfrom
sgardoll/stu-374-build-shared-accessible-controls-and-modal-behavior-for-the

Conversation

@sgardoll

@sgardoll sgardoll commented Sep 22, 2026 •

Copy link
Copy Markdown
Owner

Closes STU-374.

What this PR does

  • Introduces src/sharedControls.js and src/sharedControls.css with shared button, icon-button, field, badge, panel and dialog states.
  • Implements accessible modal lifecycle: labelled title, named close, initial focus, focus containment, Escape/backdrop handling, background inerting, return focus and scroll restoration.
  • Adapts existing modal entry points in app.js while preserving their calling contracts and adds non-dismissable pending behavior for commit progress.
  • Adds scripts/test-accessible-modals.mjs and npm run test:accessibility to cover all seven adapted shells.

Verification

  • npm test — 274/274 passing.
  • npm run build — production bundle built successfully.
  • npm run test:accessibility — passed for 7 shells at 360×500, verifying focus containment/return, Escape, pending blocking, keypress isolation, 44px touch targets and small-height scrolling.
  • git diff --check — clean.

RetriggerConfidence Score: 5/5

The PR appears safe to merge, with no outstanding findings in the current revision.

Summary

This PR introduces shared accessible controls and modal lifecycle management, adapts existing modal entry points, expands custom-code dependency verification reporting, and adds CI coverage for accessibility and deployment safeguards.

  • Adds reusable button, field, badge, panel, and dialog components and styles.
  • Implements modal focus containment, focus restoration, background inerting, dismissal handling, and pending-state behavior.
  • Reports skipped and approximate custom-code verification outcomes in deployment results.
  • Runs the browser accessibility suite and deployment safeguards in CI.

Reviews (4) · Last reviewed commit: "fix: scope the verification skip to dire..."

STU-368. Which packages the Flutter SDK supplies was decided by a
hand-maintained name list kept in three places, and flutter_web_plugins was in
none of them. Every project declaring it - which is every web-enabled project
with a plugin - read it as a dependency that could not be reproduced, and the
deploy was refused for a package most of its classes never imported.

The project's own pubspec already says where each package comes from; the
parser read those lines and threw them away. It now returns them as
sourceKey/sourceValue, so the classification is exact and cannot fall behind
the SDK:

  sdk:                            -> the Flutter SDK, reproduced from the name
  a nested version:               -> a constraint written on its own line
  git: / path: / nested hosted:   -> not expressible in the manifest

SDK_DEPENDENCIES is gone. The runner's allowedSdkPackages is gone too - it
independently refused the same deploy with 'Unsupported SDK package'. That
allowlist was also the only validation of an sdkPackages entry, so the package
name pattern now does that job; without the swap a caller-supplied name would
reach the generated pubspec unchecked. The runner still writes 'sdk: flutter'
itself, so that value never comes from a caller.

Refusal is now scoped per class, to that class's own imports, so one git: entry
no longer leaves an entire deploy uncompiled.

The accept/warn split already existed and is unchanged: a real analyzer error
refuses with 422, and a class that could not be compiled is pushed with its
warning logged before the provisioning request.

Corrects DEPLOYMENT.md, which still described the scaffolding-closure
compilation that reverting a1238f0 removed, and still claimed that nothing
unverified is deployed.

Verified: 274/274 tests, deploy guard 9/9, proxies 30/30, build clean, dart
analyze on the runner reports no issues.
- Add src/designTokens.css as the single shipping token stylesheet, extracted
  from the canonical custom-code-connect-hero.html :root token set.
- Link the stylesheet from index.html; reuse existing /fonts/Delight-VF.ttf
  and DM Mono Google Fonts path.
- Replace the legacy inline :root in index.html with only the layout
  constant --sidebar-w, preserved until its owning shell change.
- Migrate legacy variable references to new tokens:
  --main-bg -> --bg, --navy -> --fg, --label -> --muted, --sublabel -> --muted-2,
  --input-bg -> --surface-sunken, --input-border -> --border,
  --badge-bg -> --accent-soft, --badge-text -> --accent,
  --glow-color -> --accent-soft.
- Centralize :focus-visible and prefers-reduced-motion defaults in the token
  stylesheet and remove redundant local reduced-motion rules.
- No generation/deploy code changed; app.js has no affected CSS var refs.
Comment thread src/customCodeVerification.js Resolved
Comment thread src/pubspecSync.js Resolved
Comment thread .github/workflows/ci.yml Resolved
@sgardoll

Copy link
Copy Markdown
Owner Author

@greptileai — all findings from the previous review have been addressed (see new commits). Please re-review this PR.

@sgardoll

Copy link
Copy Markdown
Owner Author

Closing: this branch is already fully contained in milestone/stu-implement-updated-ui-ux, merged during the earlier integration run as dbbca77 (STU-374). GitHub refuses to retarget this PR to the milestone branch for that exact reason — there are no new commits between the two. The work therefore ships with the milestone → main PR and this PR no longer corresponds to anything unmerged. Nothing is lost; the commits remain in history.

@sgardoll sgardoll closed this Sep 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant