fix: add focus state to swaps input for improved accessibility (#29252)

## **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)](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html),
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



https://github.com/user-attachments/assets/961ea815-2014-47e3-b4f2-514197fae9dd


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


https://github.com/user-attachments/assets/27a27dd5-51f3-473a-ad5b-bbde22caa7e2

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md)
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] 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

Author: georgewrmarshall

ui/pages/swaps/prepare-swap-page/index.scss

@@ -133,10 +133,10 @@
 
   &__from-token-amount {
     border: 0;
-    outline: none;
+    margin-right: -4px;
 
     input {
-      padding-right: 0;
+      padding-right: 4px;
       text-align: right;
       font-weight: var(--typography-s-heading-lg-font-weight);
       font-size: var(--typography-s-heading-lg-font-size);

ui/pages/swaps/prepare-swap-page/prepare-swap-page.js

@@ -893,6 +893,7 @@ export default function PrepareSwapPage({
             display={DISPLAY.FLEX}
             justifyContent={JustifyContent.spaceBetween}
             alignItems={AlignItems.center}
+            gap={4}
           >
             <SelectedToken
               onClick={onSwapFromOpen}