Associating delete message with button

NYPL · Dec 3, 2024 · 7d58c93 · 7d58c93
1 parent c7c18f2
commit 7d58c93
Showing 1 changed file with 4 additions and 2 deletions.
diff --git 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"