fix(currencyswap): [a11y] swap button focus color feedback

PaulFasola · Apr 4, 2021 · 2c11e7a · 2c11e7a
1 parent 7a70a56
commit 2c11e7a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/components/CurrencySwap/index.tsx b/src/components/CurrencySwap/index.tsx
@@ -210,7 +210,13 @@ const CurrencySwap: React.FC<IProps> = (props) => {
       </InputWrapper>
       <SwapButton
         aria-label={strs.swapBtnLabel}
-        onClick={() => {
+        onClick={(e) => {
+          // unfocus when the user clicks on the button since this last will keep the focus
+          // that event shouldn't be trigerred while using keyboard navigation for accessibility reasons
+          if (e.screenX > 0 && e.screenY) {
+            e.currentTarget.blur();
+          }
+
           setSwapValues({ input: swapValues.output, output: swapValues.input });
           /* istanbul ignore next */
           setActiveProtocols({ input: activeProtocols?.output, output: activeProtocols?.input });

diff --git a/src/components/CurrencySwap/style.ts b/src/components/CurrencySwap/style.ts
@@ -66,7 +66,9 @@ export const SwapButton = styled.button`
   background: transparent;
   cursor: pointer;
 
-  &:hover path {
+  &:hover path,
+  &:focus path {
+    transition: fill 0.15s ease-in;
     fill: ${(p) => _(p.theme, 'disabled', 'color')}!important;
   }
 
@@ -100,8 +102,11 @@ export const SubmitButton = styled.button`
     cursor: auto;
   }
 
-  &:hover:not(:disabled) {
-    background-color: ${(p) => _(p.theme, 'defaultButton', 'hoverBgColor')};
+  &:hover,
+  &:focus {
+    &:not(:disabled) {
+      background-color: ${(p) => _(p.theme, 'defaultButton', 'hoverBgColor')};
+    }
   }
 `;