From 9883dfa01db308f5d898be4f2c7937e831800a84 Mon Sep 17 00:00:00 2001
From: Hasham Qaiser <hashamqaiser24@gmail.com>
Date: Mon, 18 Mar 2024 10:17:48 -0700
Subject: [PATCH] added aria labels to each good and bad example on advice page
 works with screen reader correctly

---
 .../src/pages-form/Advice.tsx                 | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/products/statement-generator/src/pages-form/Advice.tsx b/products/statement-generator/src/pages-form/Advice.tsx
index b006c84a..3ab66bc2 100644
--- a/products/statement-generator/src/pages-form/Advice.tsx
+++ b/products/statement-generator/src/pages-form/Advice.tsx
@@ -77,42 +77,54 @@ export default function Advice() {
         <div className={classes.yesNoContainer}>
           <div className={`${classes.borderContainer} ${classes.marginRight}`}>
             <CancelIcon style={{ color: '#E87461' }} className={classes.icon} />
-            <p className={classes.textMargin}>{t('advice_page.point1.no')}</p>
+            <p className={classes.textMargin} aria-label="Bad Example">
+              {t('advice_page.point1.no')}
+            </p>
           </div>
           <div className={classes.borderContainer}>
             <CheckCircleIcon
               style={{ color: '#0AEBA0' }}
               className={classes.icon}
             />
-            <p className={classes.textMargin}>{t('advice_page.point1.yes')}</p>
+            <p className={classes.textMargin} aria-label="Good Example">
+              {t('advice_page.point1.yes')}
+            </p>
           </div>
         </div>
         <p className={classes.text}>{t('advice_page.point2.content')}</p>
         <div className={classes.yesNoContainer}>
           <div className={`${classes.borderContainer} ${classes.marginRight}`}>
             <CancelIcon style={{ color: '#E87461' }} className={classes.icon} />
-            <p className={classes.textMargin}>{t('advice_page.point2.no')}</p>
+            <p className={classes.textMargin} aria-label="Bad Example">
+              {t('advice_page.point2.no')}
+            </p>
           </div>
           <div className={classes.borderContainer}>
             <CheckCircleIcon
               style={{ color: '#0AEBA0' }}
               className={classes.icon}
             />
-            <p className={classes.textMargin}>{t('advice_page.point2.yes')}</p>
+            <p className={classes.textMargin} aria-label="Good Example">
+              {t('advice_page.point2.yes')}
+            </p>
           </div>
         </div>
         <p className={classes.text}>{t('advice_page.point3.content')}</p>
         <div className={classes.yesNoContainer}>
           <div className={`${classes.borderContainer} ${classes.marginRight}`}>
             <CancelIcon style={{ color: '#E87461' }} className={classes.icon} />
-            <p className={classes.textMargin}>{t('advice_page.point3.no')}</p>
+            <p className={classes.textMargin} aria-label="Bad Example">
+              {t('advice_page.point3.no')}
+            </p>
           </div>
           <div className={classes.borderContainer}>
             <CheckCircleIcon
               style={{ color: '#0AEBA0' }}
               className={classes.icon}
             />
-            <p className={classes.textMargin}>{t('advice_page.point3.yes')}</p>
+            <p className={classes.textMargin} aria-label="Good Example">
+              {t('advice_page.point3.yes')}
+            </p>
           </div>
         </div>
       </div>