From b1486b4b7d33257ae68cc7ae0dd952ee14fd9e88 Mon Sep 17 00:00:00 2001
From: Meghan Sardesai <msardesai@mozilla.com>
Date: Wed, 25 May 2022 17:52:57 -0400
Subject: [PATCH] fix(a11y): add a11y to modal close button svg Because:

* We want ensure all user interactions meet accessibility standards

This commit:

* Adds a11y attributes to modal close button svg

Closes #12921
---
 .../src/components/DialogMessage/index.tsx                 | 7 ++++++-
 .../fxa-payments-server/src/routes/Subscriptions/index.tsx | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/fxa-payments-server/src/components/DialogMessage/index.tsx b/packages/fxa-payments-server/src/components/DialogMessage/index.tsx
index da5c00db900..ce3c498dc3e 100644
--- a/packages/fxa-payments-server/src/components/DialogMessage/index.tsx
+++ b/packages/fxa-payments-server/src/components/DialogMessage/index.tsx
@@ -49,7 +49,12 @@ export const DialogMessage = ({
                 aria-label="Close modal"
                 onClick={onDismiss as () => void}
               >
-                <CloseIcon role="img" className="close-icon" />
+                <CloseIcon
+                  role="img"
+                  className="close-icon"
+                  aria-hidden="true"
+                  focusable="false"
+                />
               </button>
             </Localized>
           )}
diff --git a/packages/fxa-payments-server/src/routes/Subscriptions/index.tsx b/packages/fxa-payments-server/src/routes/Subscriptions/index.tsx
index 84941b40f95..40d28dcd24a 100644
--- a/packages/fxa-payments-server/src/routes/Subscriptions/index.tsx
+++ b/packages/fxa-payments-server/src/routes/Subscriptions/index.tsx
@@ -262,7 +262,12 @@ export const Subscriptions = ({
               aria-label="Close modal"
               onClick={hideSuccessAlert}
             >
-              <CloseIcon role="img" className="close-icon close-alert-bar" />
+              <CloseIcon
+                role="img"
+                className="close-icon close-alert-bar"
+                aria-hidden="true"
+                focusable="false"
+              />
             </span>
           </Localized>
         </AlertBar>