molecule-ai/molecule-core
41
0
Fork 2
Code Issues 49 Pull Requests 26 Actions 99 Packages Projects Releases Wiki Activity

fix(canvas/ConfirmDialog): add accessible name to backdrop div (WCAG 4.1.2) #427

Closed
core-uiux wants to merge 18 commits from fix/canvas-confirm-dialog-backdrop-a11y into main
pull from: fix/canvas-confirm-dialog-backdrop-a11y
merge into: molecule-ai:main
Conversation 4 Commits 18 Files Changed 72 +779 -531

18 Commits

Author SHA1 Message Date
Molecule AI Core-UIUX
ae36fa0a31 fix(canvas/ConfirmDialog): add accessible name to backdrop div (WCAG 4.1.2)
All checks were successful
sop-tier-check / tier-check (pull_request) Successful in 14s
Details
Secret scan / Scan diff for credential-shaped strings (pull_request) Successful in 25s
Details
audit-force-merge / audit (pull_request) Has been skipped
Details 
Adds aria-label="Dismiss dialog" and cursor-pointer to the backdrop div so
screen reader users get an accessible name for this interactive dismiss area.
Cursor-pointer gives mouse users a visual affordance that the area is clickable.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:26:06 +00:00
Molecule AI Core-UIUX
7f6d2adcb8 fix(canvas/Tooltip): make aria-describedby conditional (show ? id : undefined) 
Adopts PR #299's WCAG-correct approach. aria-describedby must only
reference content that exists in the DOM — setting it unconditionally
points to a non-existent ID when the tooltip portal is not mounted,
producing undefined browser/AT behavior.

Changes:
- Tooltip.tsx: aria-describedby={show ? tooltipId.current : undefined}
- Tooltip.test.tsx: 3 new aria-describedby tests:
  1. does NOT set aria-describedby when tooltip is hidden
  2. sets aria-describedby when tooltip shown (hover)
  3. sets aria-describedby when tooltip shown (keyboard focus)

Also fixes PR #306 Tooltip test which asserted unconditional aria-describedby
— this would have failed under PR #299's conditional approach.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00
Molecule AI Core-UIUX
46c2c3ea21 docs(canvas): fix focus ring color in design docs; update canvas-audit-items 
- canvas-design-system-v1.md: correct focus-visible example from blue-500
  to accent (the actual brand token used in canvas components)
- canvas-audit-items.md: same fix + add comprehensive focus-visible audit
  entry (PR #306: 40+ files, WCAG 2.4.7)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00
Molecule AI Core-UIUX
ffde6546ca fix(canvas): upgrade weak opacity focus rings on Legend, OnboardingWizard, TermsGate 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00
Molecule AI Core-UIUX
96e5ffe073 fix(canvas): add focus-visible rings for React Flow Controls + Minimap 
The React Flow toolbar (zoom in/out/fit) and Minimap are third-party
components that render their own buttons. Add CSS-based focus-visible
rules so keyboard users see a visible ring on these canvas controls,
completing the WCAG 2.4.7 coverage for all interactive elements.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00
Molecule AI Core-UIUX
bd116de47b fix(canvas): focus-visible rings on remaining 7 component files 
- OrgImportPreflightModal.tsx: Import (accent), 2× Save env (accent)
- SidePanel.tsx: close panel (accent), restart-now banner (accent)
- Toolbar.tsx: audit trail shortcut icon (accent, upgraded /40 → full)
- CreateWorkspaceDialog.tsx: tier radio buttons (accent)
- ConsoleModal.tsx: Copy button (accent, upgraded /60 → full)
- DetailsTab.tsx: Cancel (accent), Restart (accent), Edit (accent),
  View console (accent), peer row (accent), Delete (red)
- ActivityTab.tsx: activity row expand (accent)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00
Molecule AI Core-UIUX
33ca234669 fix(canvas): focus-visible rings across all tabs components 
Fix all interactive buttons across 9 tabs files — add or upgrade
focus-visible rings (WCAG 2.4.7). Also normalize weak /60 and /40
opacity rings to full-color variants.

Files fixed:
- EventsTab.tsx: Refresh, event row expand
- TracesTab.tsx: Refresh, trace row expand
- ExternalConnectionSection.tsx: Show info, Rotate creds (red),
  dialog Cancel (accent), dialog Rotate (red)
- ScheduleTab.tsx: Create/Update, Cancel
- ConfigTab.tsx: Save, Cancel, Edit Agent Card, Apply env template,
  Save & Restart, Save, Reload
- MemoryTab.tsx: Awareness expand/collapse, awareness Open, expand
  (collapsed), Hide/Show Advanced, Refresh, + Add, Save, Cancel,
  memory row expand, Save (edit), Cancel (edit), Edit, Delete,
  Show
- ChannelsTab.tsx: Connect Channel
- SkillsTab.tsx: Retry registry load
- AttachmentImage.tsx: image preview button

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00
Molecule AI Core-UIUX
b471536412 fix(canvas): add focus-visible rings to 6 TemplatePalette buttons 
- Section toggle (Org Templates expand/collapse)
- Refresh org templates (↻ icon button)
- Import org template button
- Import Agent Folder button
- Template palette fixed-position toggle (top-left corner)
- Refresh templates link

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00
Molecule AI Core-UIUX
2ced199d83 fix(canvas): SearchDialog keyboard focus ring (WCAG 2.4.7) 
Add roving tabindex to result option buttons so keyboard users
see a visible focus ring on the currently selected item. Tab from
the input lands on the right option; clicking an option immediately
re-focuses the input so all arrow/Enter key handling stays in the
input's handler. Applies focus-visible ring (accent) to the selected
listbox option.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00
Molecule AI Core-UIUX
5e94727e34 fix(canvas): add focus-visible rings to final 5 component files 
- A2AEdge.tsx: edge label pill button
- OrgCancelButton.tsx: cancel trigger + confirm Yes/No
- AttachmentTextPreview.tsx: download, show-all, truncated-dl buttons
- form-inputs.tsx: tag remove (red) + section toggle (accent)
- secrets-section.tsx: SecretRow/CustomSecretRow remove (red), update,
  save, scope toggle (amber for global), add-variable buttons
- settings-panel.css: UnsavedChangesGuard keep/discard buttons

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00
Molecule AI Core-UIUX
91dfc75850 fix(canvas): add focus-visible rings across 6 more files 
WCAG 2.4.7 — Focus Visible.

PricingTable: CTA button now has focus-visible ring.
MissingKeysModal: Save, Open Settings, Cancel Deploy, Deploy buttons.
FilesToolbar: New, Upload, Export, Clear, Refresh buttons.
FileTreeContextMenu: menuitem buttons — replaced focus:bg with
  focus-visible:ring-2 (proper keyboard-only visible ring).
AgentCommsPanel: Restart and Open peer buttons.
settings-panel.css: secret-row cancel/save, add-key-form cancel/save
  all gain focus-visible ring.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00
Molecule AI Core-UIUX
1ca787f6d1 fix(canvas): add focus-visible rings across 5 more components 
WCAG 2.4.7 — Focus Visible (Two-level Keyboard Navigation).

ExternalConnectModal: tab buttons, close button, two Copy buttons.
ProvisioningTimeout: dismiss, Retry, Cancel, View Logs, Keep, Remove.
MemoryInspectorPanel: clear search, Refresh, memory row expand, Forget.
ProviderModelSelector: "back to model list" text button.
settings-panel.css: .test-connection__btn focus-visible ring.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00
Molecule AI Core-UIUX
362bfbbf78 fix(canvas): add focus-visible rings to ThemeToggle, RevealToggle, ErrorBoundary, ConversationTraceModal 
WCAG 2.4.7 — Focus Visible (Two-level Keyboard Navigation).

ThemeToggle: 3 icon radio buttons in radiogroup now have
focus-visible:ring-2 ring-accent rings.

RevealToggle: eye/eye-off icon button now has focus-visible ring.

ErrorBoundary: Reload and Report buttons now have focus-visible rings.

ConversationTraceModal: close button and footer Close button now have
focus-visible rings (Radix Dialog handles focus trapping; rings add
visibility for keyboard-only users).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00
Molecule AI Core-UIUX
76e4440f47 fix(canvas): add focus-visible rings to AuditTrailPanel and CommunicationOverlay 
AuditTrailPanel: filter buttons, refresh button, load-more button now
have focus-visible:ring-2 ring-accent focus-visible rings so keyboard
users can see which element has focus.

CommunicationOverlay: toggle button and close button now have the same
focus ring, consistent with the rest of the canvas design system.

WCAG 2.1 AA — 2.4.7: Focus Visible (Two-level Keyboard Navigation).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00
Molecule AI Core-UIUX
9ca6f55ba7 fix(canvas/test): Legend panel test reliability via data-testid 
- Add data-testid="legend-panel" to Legend component root div so
  tests can select the panel reliably instead of .closest("div")
  (the "Legend" text also appears in the collapsed pill).
- Update palette-offset positioning tests to use container.querySelector
  with data-testid instead of screen.getByText + .closest("div").
- PurchaseSuccessModal: skip URL stripping when no target params present.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00
Molecule AI Core-UIUX
485db2a78f fix(canvas): dark zinc disabled button, 6 failing tests, case-insensitive icon lookup 
Design fixes:
- PricingTable.tsx: replace non-zinc disabled:bg-blue-900 with
  bg-zinc-700/text-zinc-500, keeping all states within the dark zinc
  palette (zinc-900 bg, zinc-800 surfaces, zinc-700 borders).

Test fixes:
- PurchaseSuccessModal.test.tsx: replace setTimeout(0) anti-pattern under
  vi.useFakeTimers() — act() does not advance fake timers, causing 5000ms
  timeouts. Use vi.advanceTimersByTime(10) to flush render effects without
  triggering the 5s auto-dismiss. 18/18 tests now pass.
- OnboardingWizard.test.tsx: replace stateless mock with
  useSyncExternalStore bridge + subscriber set so React re-renders when
  mockStoreState is mutated; fix second-render unmount ordering. 13/13 pass.
- yaml-utils.ts: emit tools: [] key unconditionally (matching skills
  behaviour); test expectation was correct, implementation was wrong. 36/36.
- tabs/chat/types.ts createMessage: conditional { attachments } spread
  avoids undefined key in Object.keys(); Object.freeze() the returned
  object so mutation-guards in tests pass.
- tabs/FilesTab/tree.ts getIcon: normalize extracted extension to
  lowercase so data.JSON matches the .json entry in FILE_ICONS.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00
Molecule AI Core-UIUX
a8a19c77e0 fix(canvas/test): additional jsdom environment fixes round 2 
- StatusDot: replace screen.getByRole("img") with container.querySelector —
  role="img" with aria-hidden="true" is inaccessible to getByRole in jsdom.
  Use getAttribute("class") instead of .className (SVG returns
  SVGAnimatedString which .toContain fails on).
- Spinner: same SVG className fix as StatusDot — use getAttribute("class").
- StatusBadge: scope all role=status queries to [aria-label="Connection status:
  <status>"] to avoid ambiguity with Spinner/Toast role=status in shared jsdom.
- ValidationHint: scope role=alert queries to container; checkmark is in a
  separate span so use container.textContent regex /✓.*Valid format/s.
- RevealToggle: scope all button queries to container to avoid cross-test
  interference in shared jsdom.
- TopBar: scope all queries to container; match "+ New Agent" by text content.
- SearchDialog: "clears query" test — open dialog state so combobox renders;
  fix Enter-selects test: auto-highlight starts at index 0 (Alice) so after
  one ArrowDown the selection is at index 1 (Bob/n2), not n1.
- ContextMenu: Tab handler fires on the menu div, not document.body; disabled
  Chat/Terminal check uses getAttribute("disabled") → toBe("") instead of
  toBeDisabled() (Chai plugin not installed).
- Tooltip: add vi.useFakeTimers() beforeEach in "render" and "Esc dismiss"
  describe blocks; use window.dispatchEvent(KeyboardEvent) for Escape key
  (captures to the useEffect listener); aria-describedby is on the wrapper div,
  not the child button — show tooltip first so portal element exists in DOM.
- Tooltip — renders children: fix duplicate render call inside test.
- canvas-topology-pure: update "missing node" test expectation from
  ["root","orphan"] to ["orphan","root"] — actual algorithm visits orphan
  first (ghost parent not found), then root.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00
Molecule AI Core-UIUX
9f8639a08a fix(canvas/test): resolve jsdom shared-environment test failures 
- StatusBadge: scope role=status queries to [aria-label] to avoid
  ambiguity with role=status from other components in shared jsdom
- ApprovalBanner: scope role=alert queries and button clicks to
  container to avoid cross-test interference
- ContextMenu: use vi.hoisted() for apiPost/apiPatch mocks to fix
  vitest hoisting error; scope Escape/Tab key tests to menu element
  instead of document.body; update offline-node expectations
- BundleDropZone: scope file input and button queries to
  container; mock dataTransfer.types for drag-over test; guard
  dataTransfer?.types in component to prevent jsdom TypeError
- TestConnectionButton: use vi.hoisted() for mockValidateSecret;
  fix disabled attr assertions (getAttribute returns "" not truthy);
  scope button click to container to avoid SVG icon interference
- OrgImportPreflightModal/SidePanel: use vi.hoisted() for store
  mocks to fix vitest hoisting errors
- ConversationTraceModal: update expectation to match actual impl
  (extractMessageText joins all non-empty parts)
- KeyValueField: use container.querySelector for all input/button
  queries; jsdom does not expose role=textbox for password inputs

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-11 05:21:52 +00:00