fix(paymentrequest): [a11y] cancel button focus color feedback

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

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/components/PaymentRequest/__tests__/__snapshots__/index.test.tsx.snap b/src/components/PaymentRequest/__tests__/__snapshots__/index.test.tsx.snap
@@ -484,7 +484,8 @@ exports[`PaymentRequest Detailed Should be fully string customizable 1`] = `
   text-align: center;
 }
 
-.c8:hover {
+.c8:hover,
+.c8:focus {
   color: #ffffff;
   background-color: #f7931a;
 }

diff --git a/src/components/PaymentRequest/style.ts b/src/components/PaymentRequest/style.ts
@@ -136,7 +136,8 @@ export const CancelButton = styled.button`
   color: ${(p) => _(p.theme, 'primary', 'color')};
   text-align: center;
 
-  &:hover {
+  &:hover,
+  &:focus {
     color: ${(p) => _(p.theme, 'primary', 'backgroundColor')};
     background-color: #f7931a;
   }