Add inert backdrop, focus trap, and mobile safe-area handling to WalletConnectionModal

[greatest0fallt1me]

Description

This is a UI/UX issue. The src/components/WalletConnectionModal.tsx (with WalletConnectionModal.css) lets users pick Freighter/Albedo/xBull/Rabet, but as the primary entry point it must be a fully accessible dialog: focus-trapped, Escape-closable, background made inert, return-focus on close, and laid out as a safe-area-aware bottom sheet on mobile. Audit and complete these behaviors.

Requirements and Context

• Use useFocusTrap (src/hooks/useFocusTrap.ts); set role="dialog", aria-modal="true", and aria-labelledby.
• Mark background content inert and lock body scroll while open; restore focus to the trigger on close.
• On mobile, render as a bottom sheet respecting env(safe-area-inset-*); ensure each wallet option is a >=44px tap target with a focus ring.
• Differentiate detected/undetected wallets visually and via text (not color alone).
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b task/wallet-modal-a11y

2. Implement changes
   • src/components/WalletConnectionModal.tsx + .css
3. Test and commit
   • npm run test
   • Verify trap/Escape/return-focus and mobile sheet
   • Include screenshots in the PR

Example commit message

task: harden WalletConnectionModal accessibility and mobile layout

Acceptance Criteria

• Dialog is focus-trapped, Escape-closable, background inert
• Focus returns to the trigger on close
• Mobile bottom sheet respects safe-area insets
• Wallet availability shown without relying on color

Guidelines

• WCAG 2.1 AA: 2.1.2, 2.4.3, 4.1.2; responsive
• Clear documentation and inline comments
• Timeframe: 96 hours