MetaMask / MetaMask/metamask-extension

[Bug]: Transaction confirmation “From” account selector is not keyboard operable

Open Beginner friendly
#46,208 1 comment 0 reactions 0 assignees View on GitHub
external-contributor regression-prod-13.47.0 Sev2-normal size-S ta-ai-fixable ta-triaged team-design-system
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.