Merge pull request #2540 from SalesforceCommerceCloud/W-17599234-A11Y-email-modal-8

@W-17599234 - Ensure voiceover announces contents of the email confirmation modal

Author: larnelleankunda

packages/template-retail-react-app/CHANGELOG.md

@@ -1,9 +1,11 @@
 ## v7.0.0-dev.0 (May 20, 2025)
 
 - Improved the layout of product tiles in product scroll and product list [#2446](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2446)
+- [a11y] Ensure voiceover announces contents of the email confirmation modal [#2540](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2540)
 - Updated 6 new languages [#2495](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2495)
 - Fix Einstein event tracking for `addToCart` event [#2558](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2558)
 
+
 ## v6.1.0 (May 22, 2025)
 
 - Fix hreflang alternate links [#2269](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2269)

packages/template-retail-react-app/app/components/email-confirmation/index.jsx

@@ -18,16 +18,30 @@ const PasswordlessEmailConfirmation = ({form, submitForm, email = ''}) => {
             data-testid="sf-form-resend-passwordless-email"
         >
             <Stack spacing={6}>
-                <Stack justify="center" align="center" spacing={6} role="alert">
+                <Stack
+                    justify="center"
+                    align="center"
+                    spacing={6}
+                    role="alert"
+                    aria-live="polite"
+                    aria-labelledby="email-confirmation-title"
+                    aria-describedby="email-confirmation-desc email-confirmation-spam"
+                    tabIndex="-1"
+                >
                     <BrandLogo width="60px" height="auto" aria-hidden={true} />
-                    <Text align="center" fontSize="xl" fontWeight="semibold">
+                    <Text
+                        align="center"
+                        fontSize="xl"
+                        fontWeight="semibold"
+                        id="email-confirmation-title"
+                    >
                         <FormattedMessage
                             defaultMessage="Check Your Email"
                             id="auth_modal.check_email.title.check_your_email"
                         />
                     </Text>
                     <Stack spacing={10}>
-                        <Text align="center" fontSize="md">
+                        <Text align="center" fontSize="md" id="email-confirmation-desc">
                             <FormattedMessage
                                 defaultMessage="We just sent a login link to <b>{email}</b>"
                                 id="auth_modal.check_email.description.just_sent"
@@ -37,7 +51,7 @@ const PasswordlessEmailConfirmation = ({form, submitForm, email = ''}) => {
                                 }}
                             />
                         </Text>
-                        <Text align="center" fontSize="sm">
+                        <Text align="center" fontSize="sm" id="email-confirmation-spam">
                             <FormattedMessage
                                 defaultMessage="The link may take a few minutes to arrive, check your spam folder if you're having trouble finding it"
                                 id="auth_modal.check_email.description.check_spam_folder"