MetaMask / MetaMask/metamask-extension
[Bug]: Transaction confirmation “From” account selector is not keyboard operable
- Dominant language
- TypeScript
- Stars
- 13.2k
- Forks
- 5.6k
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 451
Description
### Describe the bug
In transaction confirmations that allow the funding account to be changed, the “From” account selector is implemented as a clickable non-interactive `Box` rather than a native interactive control.
In `ui/pages/confirmations/components/rows/from-account-row/from-account-row.tsx`, `from-account-pill` has an `onClick` handler but is not rendered as a button and has no equivalent keyboard interaction or focusability.
As a result, mouse users can open the account-selection modal and change the account funding the transaction, while keyboard-only users cannot operate the same control.
### Expected behavior
The “From” account selector should be exposed as a native keyboard-operable control with an accessible name and visible keyboard focus. Enter and Space should provide the native button interaction for opening the account-selection modal.
### Screenshots/Recordings
Not applicable. The defect is keyboard interaction and programmatic semantics rather than a visual rendering difference.
### Steps to reproduce
1. Open a transaction confirmation that exposes the “From” account selector.
2. Use Tab/Shift+Tab to navigate through the confirmation using only the keyboard.
3. Attempt to focus and activate the displayed funding-account selector.
4. Observe that the account selector is not part of the keyboard tab sequence and cannot be activated with Enter or Space.
5. Click the same account selector with a mouse and observe that the account-selection modal opens.
The implementation can also be inspected directly in:
`ui/pages/confirmations/components/rows/from-account-row/from-account-row.tsx`
The `from-account-pill` is currently a `Box` with `onClick={openModal}` rather than a native button.
### Error messages or log output
None.
### Where was this bug found?
Live version (from official store)
### Version
13.47.0
### Build type
None
### Browser
Chrome
### Operating system
Windows
### Hardware wallet
None
### Additional context
This affects a transaction-confirmation control that determines which account funds the transaction.
A sibling confirmation component, `AccountPickerRowContent`, already uses the appropriate project-native pattern for the equivalent account-picker interaction: `Box asChild` wrapping a native ``, an explicit accessible name, decorative icon hiding, and visible focus styling.
Relevant WCAG 2.2 success criteria include:
- 2.1.1 Keyboard
- 4.1.2 Name, Role, Value
A small remediation can reuse the existing account-picker pattern without changing the visual behavior.
### Severity
To be assessed by MetaMask triage.
Contributor guide
Research direction
Read ui/pages/confirmations/components/rows/from-account-row/from-account-row.tsx, then compare its from-account-pill with the AccountPickerRowContent pattern described in the issue. Confirm that the selector is exposed as a named, focusable native control with visible focus styling and native Enter/Space behavior, while preserving the existing modal opening behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 88/100