fix: adding focus outline to swaps input to improve accessibility for keyboard and vision impaired users

georgewrmarshall · georgewrmarshall · commit 43eed26a60af · 2024-12-17T08:47:49.000+10:30
diff --git a/ui/pages/swaps/prepare-swap-page/index.scss b/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);
diff --git a/ui/pages/swaps/prepare-swap-page/prepare-swap-page.js b/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}

Original file line number	Diff line number	Diff line change
`@@ -893,6 +893,7 @@ export default function PrepareSwapPage({`
`893`	`893`	`display={DISPLAY.FLEX}`
`894`	`894`	`justifyContent={JustifyContent.spaceBetween}`
`895`	`895`	`alignItems={AlignItems.center}`
	`896`	`+ gap={4}`
`896`	`897`	`>`
`897`	`898`	`<SelectedToken`
`898`	`899`	`onClick={onSwapFromOpen}`