code/cl8y-dex-terraclassic
4
0
Fork 0
Code Issues 35 Pull requests 6 Projects Releases Packages Wiki Activity

Wallet chip menu: Escape dismiss + semantic backdrop (a11y) #187

New issue
Closed
opened 2026-05-25 02:13:47 +00:00 by PlasticDigits · 17 comments
PlasticDigits commented 2026-05-25 02:13:47 +00:00 (Migrated from gitlab.com)
Copy link

Summary

Wallet dropdown uses a bare <div className="fixed inset-0" onClick=…> with no role and no Escape handler at the menu level (Layout.tsx Esc only closes More nav). #140 scope B sibling.

Acceptance criteria

  • Replace click-outside scrim with semantic dismiss control (e.g. type="button" + aria-label="Close wallet menu") matching Layout .app-menu-dismiss pattern.
  • Escape closes wallet menu when open (without breaking More menu Esc).
  • :focus-visible on new control per AGENTS_FRONTEND_A11Y_FOCUS.md.
  • Vitest or RTL test for Esc handler where feasible.

Relates to: #140

cc @Brouie

## Summary Wallet dropdown uses a bare `<div className="fixed inset-0" onClick=…>` with no role and **no Escape** handler at the menu level (`Layout.tsx` Esc only closes **More** nav). [#140](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/140) scope **B** sibling. ## Acceptance criteria - [x] Replace click-outside scrim with semantic dismiss control (e.g. `type="button"` + `aria-label="Close wallet menu"`) matching [`Layout`](frontend-dapp/src/components/common/Layout.tsx) `.app-menu-dismiss` pattern. - [x] `Escape` closes wallet menu when open (without breaking More menu Esc). - [x] `:focus-visible` on new control per [`AGENTS_FRONTEND_A11Y_FOCUS.md`](skills/AGENTS_FRONTEND_A11Y_FOCUS.md). - [x] Vitest or RTL test for Esc handler where feasible. **Relates to:** [#140](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/140) cc @Brouie
PlasticDigits commented 2026-05-25 02:13:48 +00:00 (Migrated from gitlab.com)
Copy link

marked as related to #140

marked as related to #140
PlasticDigits commented 2026-05-25 02:14:02 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in issue #140

mentioned in issue #140
PlasticDigits commented 2026-05-25 02:26:31 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in commit 6a44a6e67a

mentioned in commit 6a44a6e67a6dcd92d2c089be3c2db69f705e11cb
PlasticDigits commented 2026-05-25 02:26:47 +00:00 (Migrated from gitlab.com)
Copy link

Implementation (pushed to main @ 6a44a6e)

Wallet connected dropdown now matches the shell More menu dismiss pattern (#187):

  • Replaced the bare fixed inset-0 <div onClick> scrim with a semantic type="button" using class app-menu-dismiss and aria-label="Close wallet menu" (WalletButton.tsx).
  • Escape closes the wallet menu while it is open (window keydown listener scoped to showDropdown); Layout.tsx More / mobile More Escape behavior is unchanged.
  • :focus-visible inset ring on .app-menu-dismiss in index.css (shared by shell nav and wallet backdrop).
  • Vitest coverage: dismiss control presence, click dismiss, and Escape (WalletButton.test.tsx).

Docs / agent playbooks: docs/frontend.md (connected wallet chip + keyboard focus rows), skills/AGENTS_FRONTEND_WALLET_CHIP.md, skills/AGENTS_FRONTEND_A11Y_FOCUS.md.

Verification checklist

  • Connect a wallet; open the header wallet chip menu.
  • Click outside the menu (on the dimmed backdrop) — menu closes; trigger aria-expanded is false.
  • Tab to the backdrop dismiss control — visible focus ring (inset) on keyboard focus.
  • Press Escape with wallet menu open — menu closes; chip does not stay expanded.
  • Open More nav menu; press Escape — More menu still closes (regression).
  • With wallet menu open, menu items (Trader profile / Disconnect) still work; menu closes after navigation actions.
  • npm test -- --run src/components/wallet/__tests__/WalletButton.test.tsx passes locally.

@Brouie — please verify the above when you have a moment. Leaving this issue open until sign-off.

## Implementation (pushed to `main` @ 6a44a6e) Wallet connected dropdown now matches the shell **More** menu dismiss pattern ([#187](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/187)): - Replaced the bare `fixed inset-0` `<div onClick>` scrim with a semantic **`type="button"`** using class **`app-menu-dismiss`** and **`aria-label="Close wallet menu"`** (`WalletButton.tsx`). - **`Escape`** closes the wallet menu while it is open (`window` keydown listener scoped to `showDropdown`); **`Layout.tsx`** More / mobile More **Escape** behavior is unchanged. - **`:focus-visible`** inset ring on **`.app-menu-dismiss`** in `index.css` (shared by shell nav and wallet backdrop). - Vitest coverage: dismiss control presence, click dismiss, and Escape (`WalletButton.test.tsx`). **Docs / agent playbooks:** `docs/frontend.md` (connected wallet chip + keyboard focus rows), `skills/AGENTS_FRONTEND_WALLET_CHIP.md`, `skills/AGENTS_FRONTEND_A11Y_FOCUS.md`. --- ### Verification checklist - [ ] Connect a wallet; open the header wallet chip menu. - [ ] Click outside the menu (on the dimmed backdrop) — menu closes; trigger `aria-expanded` is `false`. - [ ] Tab to the backdrop dismiss control — **visible focus ring** (inset) on keyboard focus. - [ ] Press **Escape** with wallet menu open — menu closes; chip does not stay expanded. - [ ] Open **More** nav menu; press **Escape** — More menu still closes (regression). - [ ] With wallet menu open, menu items (Trader profile / Disconnect) still work; menu closes after navigation actions. - [ ] `npm test -- --run src/components/wallet/__tests__/WalletButton.test.tsx` passes locally. @Brouie — please verify the above when you have a moment. Leaving this issue **open** until sign-off.
PlasticDigits commented 2026-05-25 02:28:12 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in issue #188

mentioned in issue #188
PlasticDigits commented 2026-05-25 02:30:03 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in issue #186

mentioned in issue #186
PlasticDigits commented 2026-05-25 02:34:21 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in issue #185

mentioned in issue #185
Brouie commented 2026-05-25 02:55:58 +00:00 (Migrated from gitlab.com)
Copy link

marked the checklist item Replace click-outside scrim with semantic dismiss control e\.g\. type\=\"button\" \+ aria\-label\=\"Close wallet menu\" matching Layout .app-menu-dismiss pattern. as completed

marked the checklist item **Replace click\-outside scrim with semantic dismiss control \(e\.g\. type\=\"button\" \+ aria\-label\=\"Close wallet menu\"\) matching Layout \.app\-menu\-dismiss pattern\.** as completed
Brouie commented 2026-05-25 02:56:10 +00:00 (Migrated from gitlab.com)
Copy link

marked the checklist item Escape closes wallet menu when open (without breaking More menu Esc). as completed

marked the checklist item **Escape closes wallet menu when open \(without breaking More menu Esc\)\.** as completed
Brouie commented 2026-05-25 02:56:14 +00:00 (Migrated from gitlab.com)
Copy link

marked the checklist item Vitest or RTL test for Esc handler where feasible. as completed

marked the checklist item **Vitest or RTL test for Esc handler where feasible\.** as completed
Brouie commented 2026-05-25 02:56:17 +00:00 (Migrated from gitlab.com)
Copy link

marked the checklist item :focus-visible on new control per AGENTS_FRONTEND_A11Y_FOCUS.md. as completed

marked the checklist item **:focus\-visible on new control per AGENTS\_FRONTEND\_A11Y\_FOCUS\.md\.** as completed
Brouie commented 2026-05-25 04:39:58 +00:00 (Migrated from gitlab.com)
Copy link

qa cleared at source+test layer @PlasticDigits

verified 6a44a6e.

WalletButton.tsx — keydown listener is scoped: early return when !showDropdown + dep array [showDropdown], so the More menu Esc handler isn't shadowed when the wallet menu is closed. Dismiss control has type="button", aria-label="Close wallet menu", className="app-menu-dismiss" (lines 76-77).

index.css — .app-menu-dismiss :focus-visible adds inset 2px ring via --focus-ring 28% mix, matches shell pattern (line 1158).

WalletButton.test.tsx — 8/8 passing. The #187 group:

  • renders a semantic dismiss control when the menu is open
  • closes the menu when the dismiss control is clicked
  • closes the menu on Escape without leaving the chip expanded

browser walk (visual focus-ring + More-nav Esc no-regression) — getting a hard time with the tunnel setup here, conflicts with my YieldOmega forwards. Will close it out on the next clean stack session.

qa cleared at source+test layer @PlasticDigits verified 6a44a6e. WalletButton.tsx — keydown listener is scoped: early return when !showDropdown + dep array \[showDropdown\], so the More menu Esc handler isn't shadowed when the wallet menu is closed. Dismiss control has type="button", aria-label="Close wallet menu", className="app-menu-dismiss" (lines 76-77). index.css — .app-menu-dismiss :focus-visible adds inset 2px ring via --focus-ring 28% mix, matches shell pattern (line 1158). WalletButton.test.tsx — 8/8 passing. The #187 group: - renders a semantic dismiss control when the menu is open - closes the menu when the dismiss control is clicked - closes the menu on Escape without leaving the chip expanded browser walk (visual focus-ring + More-nav Esc no-regression) — getting a hard time with the tunnel setup here, conflicts with my YieldOmega forwards. Will close it out on the next clean stack session.
Brouie commented 2026-05-25 06:56:53 +00:00 (Migrated from gitlab.com)
Copy link

Browser walk done — stack came up cleanly:

  • Wallet menu opens from chip; click on the dimmed backdrop dismisses it; chip's aria-expanded flips back
  • Tab lands focus on menu controls with visible inset focus ring (matches the --focus-ring 28% mix pattern)
  • Esc closes the wallet menu, chip not stuck expanded
  • Opening More ▼ then pressing Esc still closes More — no regression from the WalletButton keydown scoping
  • Trader profile and Disconnect items still work, menu closes after each

7/7 items cleared. @PlasticDigits good to close.

Browser walk done — stack came up cleanly: - Wallet menu opens from chip; click on the dimmed backdrop dismisses it; chip's aria-expanded flips back - Tab lands focus on menu controls with visible inset focus ring (matches the --focus-ring 28% mix pattern) - Esc closes the wallet menu, chip not stuck expanded - Opening More ▼ then pressing Esc still closes More — no regression from the WalletButton keydown scoping - Trader profile and Disconnect items still work, menu closes after each 7/7 items cleared. @PlasticDigits good to close.
PlasticDigits (Migrated from gitlab.com) closed this issue 2026-05-25 11:09:10 +00:00
PlasticDigits commented 2026-05-29 03:16:36 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in issue #214

mentioned in issue #214
PlasticDigits commented 2026-08-26 04:22:42 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in issue #671

mentioned in issue #671
PlasticDigits commented 2026-08-26 04:23:24 +00:00 (Migrated from gitlab.com)
Copy link

mentioned in issue #672

mentioned in issue #672
PlasticDigits commented 2026-08-26 04:23:24 +00:00 (Migrated from gitlab.com)
Copy link

marked as related to #672

marked as related to #672
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
renovate/tokio-util-0.x-lockfile
renovate/thiserror-2.x-lockfile
renovate/serde_json-1.x-lockfile
renovate/serde-monorepo
renovate/libc-0.x-lockfile
renovate/chrono-0.x-lockfile
cac-design-issue-1206
cac-design-issue-1317
cac-design-issue-1316
cac-design-issue-1311
cac-design-issue-1300
cac-design-issue-1306
cac-design-issue-1305
cac-design-issue-1302
cac-design-issue-1277
No results found.
Labels
Clear labels   
agent:fix_bugfix

   
agent:fix_conflicts

   
agent:fix_security

   
agent:gap_analysis

   
agent:implement

   
agent:implement
Queue implement gate

  
agent:implement
Queue implement gate

  
agent:open_issues

   
agent:ready

   
agent:research

   
agent:security_audit

   
agent:verify

   
architecture
Architecture

  
backend
API and services

  
blocker:hybrid
Blocks hybrid launch

  
blocker:launch
Blocks launch

  
blocker:limit-orders
Blocks limits launch

  
blocker:v2
Blocks v2

  
block:log_only

   
block:security

   
bug

   
ci

   
contracts
Smart contracts

  
correctness

   
deploy

   
dev

   
devops

   
docs

   
documentation

   
duplicate

   
e2e

   
enhancement

   
epic
Epic

  
feature

   
frontend

   
functional-completion
Functional

  
gas

   
good first issue

   
governance

   
help wanted

   
high-risk

   
hooks

   
hybrid
Hybrid swaps

  
indexer
Indexer

  
infra
CI/CD

  
infrastructure

   
integrators

   
invalid

   
launch-blocker

   
limit-orders
Limit orders

  
localnet

   
localterra

   
low priority

   
missing-implementation
Implementation

  
needs-design
Design decision required

  
ops

   
performance
  
priority
high

  
priority
medium

  
product

   
qa

   
QA

   
question

   
ready
Definition of Ready

  
ready
Definition of Ready

  
research

   
scripts

   
security
Security

  
security-hardening
Security hardening

  
smartcontracts

   
tech-debt

   
testing
Testing

  
ux

   
UX

   
v2
Pool-only swaps

  
verification

   
wontfix
No labels
agent:fix_bugfix
agent:fix_conflicts
agent:fix_security
agent:gap_analysis
agent:implement
agent:implement
agent:implement
agent:open_issues
agent:ready
agent:research
agent:security_audit
agent:verify
architecture
backend
blocker:hybrid
blocker:launch
blocker:limit-orders
blocker:v2
block:log_only
block:security
bug
ci
contracts
correctness
deploy
dev
devops
docs
documentation
duplicate
e2e
enhancement
epic
feature
frontend
functional-completion
gas
good first issue
governance
help wanted
high-risk
hooks
hybrid
indexer
infra
infrastructure
integrators
invalid
launch-blocker
limit-orders
localnet
localterra
low priority
missing-implementation
needs-design
ops
performance
priority
high
priority
medium
product
qa
QA
question
ready
ready
research
scripts
security
security-hardening
smartcontracts
tech-debt
testing
ux
UX
v2
verification
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
code/cl8y-dex-terraclassic#187
No description provided.