From 7d58c930680f94b19afa20a2387f8a1e55145268 Mon Sep 17 00:00:00 2001
From: Emma Mansell <73774046+7emansell@users.noreply.github.com>
Date: Tue, 3 Dec 2024 15:48:55 -0500
Subject: [PATCH] Associating delete message with button

---
 src/components/MyAccount/Settings/UsernameForm.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/MyAccount/Settings/UsernameForm.tsx b/src/components/MyAccount/Settings/UsernameForm.tsx
index 953f962c8..21c9ee104 100644
--- a/src/components/MyAccount/Settings/UsernameForm.tsx
+++ b/src/components/MyAccount/Settings/UsernameForm.tsx
@@ -135,9 +135,10 @@ const UsernameForm = ({ patron, usernameState }: UsernameFormProps) => {
           isClearableCallback={() => setError(true)}
         />
         <Button
-          aria-label="Remove username"
+          aria-label="Delete username from your account"
+          aria-describedby="delete-warning-message"
           buttonType="text"
-          id="remove-username-btn"
+          id="delete-username-btn"
           onClick={() => {
             setTempUsername(null)
             setError(false)
@@ -151,6 +152,7 @@ const UsernameForm = ({ patron, usernameState }: UsernameFormProps) => {
         </Button>
       </Flex>
       <Banner
+        id="delete-warning-message"
         sx={{ marginTop: "xs", width: "fill" }}
         content="If you delete your username, you will have to use your barcode to log in to your account in the future."
         type="warning"