fix: add focus state to swaps input for improved accessibility

[georgewrmarshall]

Description

The current swaps input implementation hides the focus indicator, making it inaccessible for users with vision impairments and those relying on keyboard navigation. This creates barriers for:

• Users with low vision who need clear visual indicators
• Users with motor impairments who navigate via keyboard
• Users of screen magnification tools who need to track their position

This PR improves accessibility by:

1. Removing 'outline: none' from the swaps input to restore focus visibility
2. Adjusting padding (from 0 to 4px) and margins to maintain visual consistency
3. Adding proper focus visibility for keyboard navigation

These changes ensure compliance with WCAG 2.1 Success Criterion 2.4.7 (Focus Visible), which requires that keyboard focus indicators be visible and distinguishable.

Related issues

Fixes: #26662

Manual testing steps

1. Navigate to the swaps page
2. Use Tab key to move focus to the input field
3. Verify that a visible focus indicator appears around the input
4. Ensure the text alignment and spacing remain consistent
5. Test that the input remains right-aligned with the new padding

Screenshots/Recordings

Before

Input field shows no focus indicator when navigating with keyboard

before.mov

After

Input field shows clear focus indicator when navigating with keyboard, with padding-right: 4px

after720.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed)
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[georgewrmarshall]

Adds gap between asset selector and input

[georgewrmarshall]

Negative margin allows for alignment and padding of number to remain the same while input is in focus state

[metamaskbot]

Builds ready [43eed26]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2047 ± 150 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1694	2820	2063	319	153
		domContentLoaded	1639	2754	2023	310	149
		load	1695	2776	2047	312	150
		domInteractive	28	124	47	23	11
		backgroundConnect	8	88	22	17	8
		firstReactRender	17	83	43	25	12
		getState	6	71	28	20	10
		initialActions	0	1	0	0	0
		loadScripts	1206	2138	1530	251	121
		setupStore	6	54	15	13	6
		uiStartup	1907	3141	2333	362	174

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 6 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[DDDDDanica]

Tested:
✅ access to input in swaps with tabs
✅ input a value in that input with keyboard