Improve accessibility for Toggle, TokenInputQuantity, DropdownMenu2, …

[benwolski]

…Modal, and Tooltip components

Add comprehensive ARIA attributes and keyboard navigation support across multiple components. Replace useEffect-based keyboard handlers with useCallback for better performance. Implement focus management and focus trapping in Modal component. Add proper semantic roles and ARIA labels throughout. Fix Toggle component to use 'switch' role instead of 'checkbox' and improve keyboard event handling. Update

Describe your changes

Summary of Fixes

1. Toggle Component (@/Users/benwolski/code/croc/ambient-ts-app/src/components/Form/Toggle.tsx)

• Fixed bug: Enter key handler now actually calls handleToggle() (was just referencing it)
• Fixed: Replaced global document.addEventListener with component-scoped onKeyDown handler
• Added: Space key support (standard for toggle controls)
• Added: ariaLabel prop for screen reader support
• Changed: role from checkbox to switch (more semantically correct)
• Added: aria-disabled attribute
• Fixed: tabIndex now -1 when disabled

2. Tooltip Component (@/Users/benwolski/code/croc/ambient-ts-app/src/components/Global/Tooltip/Tooltip.tsx)

• Added: onFocus/onBlur handlers for keyboard accessibility
• Added: role="tooltip" for screen readers
• Added: aria-describedby relationship using unique ID
• Added: Escape key dismisses tooltip

3. Modal Component (@/Users/benwolski/code/croc/ambient-ts-app/src/components/Global/Modal/Modal.tsx)

• Fixed: Close button now uses proper <button> element with tabIndex={0} (was icon with tabIndex={-1})
• Added: Focus trap to keep Tab navigation within modal
• Added: Auto-focus modal on open
• Added: Restore focus to previous element on close
• Added: aria-labelledby attribute

4. DropdownMenu2 (@/Users/benwolski/code/croc/ambient-ts-app/src/components/Global/DropdownMenu2/DropdownMenu2.tsx)

• Added: Keyboard navigation (Enter, Space, ArrowDown to open)
• Added: role="button", aria-haspopup="menu", aria-expanded, aria-disabled
• Added: tabIndex for keyboard focus

5. TokenInputQuantity (@/Users/benwolski/code/croc/ambient-ts-app/src/components/Form/TokenInputQuantity.tsx)

• Added: inputAriaLabel prop for custom labels
• Added: Default aria-label using token symbol
• Added: aria-disabled attribute
• Fixed: Changed type="string" to type="text" (valid HTML)

[netlify]

✅ Deploy Preview for dev-ambi ready!

Name	Link
🔨 Latest commit	e4232ee
🔍 Latest deploy log	https://app.netlify.com/projects/dev-ambi/deploys/694461137fd1b10007f0f2df
😎 Deploy Preview	https://deploy-preview-5096--dev-ambi.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for futa-finance ready!

Name	Link
🔨 Latest commit	e4232ee
🔍 Latest deploy log	https://app.netlify.com/projects/futa-finance/deploys/69446113efa249000883ff16
😎 Deploy Preview	https://deploy-preview-5096--futa-finance.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for plume-ambient-finance ready!

Name	Link
🔨 Latest commit	e4232ee
🔍 Latest deploy log	https://app.netlify.com/projects/plume-ambient-finance/deploys/69446113efa249000883ff12
😎 Deploy Preview	https://deploy-preview-5096--plume-ambient-finance.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.