From 293a733806bfbd470ce2645db658316cda167da2 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Mon, 27 May 2024 10:16:10 +1000
Subject: [PATCH] feat: account creation flow done

updated some testids and aria labels, SessionInput now has aria label support
---
 ts/components/EmptyMessageView.tsx                  |  4 +++-
 ts/components/inputs/SessionInput.tsx               | 12 ++++++++++--
 ts/components/leftpane/LeftPaneSectionHeader.tsx    |  1 +
 ts/components/registration/RegistrationStages.tsx   |  4 ++--
 ts/components/registration/stages/CreateAccount.tsx |  2 ++
 ts/components/registration/stages/Start.tsx         |  2 ++
 6 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/ts/components/EmptyMessageView.tsx b/ts/components/EmptyMessageView.tsx
index bb71d02ca..64d1599d2 100644
--- a/ts/components/EmptyMessageView.tsx
+++ b/ts/components/EmptyMessageView.tsx
@@ -110,7 +110,9 @@ export const EmptyMessageView = () => {
       {!conversationCount ? (
         <>
           <StyledHR />
-          <StyledNoConversations>{window.i18n('conversationsNone')}</StyledNoConversations>
+          <StyledNoConversations data-testid="empty-conversation">
+            {window.i18n('conversationsNone')}
+          </StyledNoConversations>
           <SpacerXS />
           <StyledP style={{ width: '360px' }}>{window.i18n('onboardingHitThePlusButton')}</StyledP>
         </>
diff --git a/ts/components/inputs/SessionInput.tsx b/ts/components/inputs/SessionInput.tsx
index b18a6c902..adffd829f 100644
--- a/ts/components/inputs/SessionInput.tsx
+++ b/ts/components/inputs/SessionInput.tsx
@@ -147,6 +147,7 @@ const StyledTextAreaContainer = styled(motion.div)<{
 const ErrorItem = (props: { id: string; error: string }) => {
   return (
     <motion.label
+      aria-label="Error message"
       htmlFor={props.id}
       className={'filled error'}
       initial={{ opacity: 0 }}
@@ -181,6 +182,7 @@ const ShowHideButton = (props: {
         iconSize="huge"
         onClick={props.toggleForceShow}
         style={style}
+        aria-label={'Show or hide input'}
         dataTestId="reveal-recovery-phrase-toggle"
       />
     );
@@ -207,6 +209,7 @@ type Props = {
   type?: string;
   value?: string;
   placeholder?: string;
+  ariaLabel?: string;
   maxLength?: number;
   enableShowHide?: boolean;
   onValueChanged?: (value: string) => any;
@@ -232,6 +235,7 @@ export const SessionInput = (props: Props) => {
     placeholder,
     type = 'text',
     value,
+    ariaLabel,
     maxLength,
     enableShowHide,
     error,
@@ -346,10 +350,14 @@ export const SessionInput = (props: Props) => {
       >
         {isTextArea ? (
           <StyledTextAreaContainer {...containerProps}>
-            <textarea {...inputProps} />
+            <textarea {...inputProps} aria-label={ariaLabel || 'session input text area'} />
           </StyledTextAreaContainer>
         ) : (
-          <StyledInput {...inputProps} {...containerProps} />
+          <StyledInput
+            {...inputProps}
+            {...containerProps}
+            aria-label={ariaLabel || 'session input'}
+          />
         )}
         {editable && enableShowHide && (
           <ShowHideButton
diff --git a/ts/components/leftpane/LeftPaneSectionHeader.tsx b/ts/components/leftpane/LeftPaneSectionHeader.tsx
index 317b2c0fb..db980f05f 100644
--- a/ts/components/leftpane/LeftPaneSectionHeader.tsx
+++ b/ts/components/leftpane/LeftPaneSectionHeader.tsx
@@ -120,6 +120,7 @@ export const LeftPaneBanner = () => {
         <p>{window.i18n('saveRecoveryPasswordDescription')}</p>
         <SpacerMD />
         <SessionButton
+          ariaLabel="Reveal recovery phrase button"
           text={window.i18n('continue')}
           onClick={showRecoveryPhraseModal}
           dataTestId="reveal-recovery-phrase"
diff --git a/ts/components/registration/RegistrationStages.tsx b/ts/components/registration/RegistrationStages.tsx
index 6840cad70..e2096ed72 100644
--- a/ts/components/registration/RegistrationStages.tsx
+++ b/ts/components/registration/RegistrationStages.tsx
@@ -52,7 +52,7 @@ export const RegistrationStages = () => {
           </div>
           <Flex container={true} alignItems="center">
             <SessionIconButton
-              aria-label="external link to Session FAQ web page"
+              ariaLabel="FAQ Link"
               iconType="question"
               iconSize={'medium'}
               iconPadding="4px"
@@ -66,7 +66,7 @@ export const RegistrationStages = () => {
             />
             <SpacerSM />
             <SessionIconButton
-              aria-label="external link to Session website"
+              ariaLabel="Session website link"
               iconType="link"
               iconSize="medium"
               iconColor="var(--text-primary-color)"
diff --git a/ts/components/registration/stages/CreateAccount.tsx b/ts/components/registration/stages/CreateAccount.tsx
index 70cd20e72..273ee7e13 100644
--- a/ts/components/registration/stages/CreateAccount.tsx
+++ b/ts/components/registration/stages/CreateAccount.tsx
@@ -128,6 +128,7 @@ export const CreateAccount = () => {
         <OnboardDescription>{window.i18n('displayNameDescription')}</OnboardDescription>
         <SpacerLG />
         <SessionInput
+          ariaLabel={'Enter display name'}
           autoFocus={true}
           disableOnBlurEvent={true}
           type="text"
@@ -143,6 +144,7 @@ export const CreateAccount = () => {
         />
         <SpacerLG />
         <SessionButton
+          ariaLabel="Continue"
           buttonColor={SessionButtonColor.White}
           onClick={signUpWithDetails}
           text={window.i18n('continue')}
diff --git a/ts/components/registration/stages/Start.tsx b/ts/components/registration/stages/Start.tsx
index 0e4f9057d..fe6affd0b 100644
--- a/ts/components/registration/stages/Start.tsx
+++ b/ts/components/registration/stages/Start.tsx
@@ -43,6 +43,7 @@ export const Start = () => {
   return (
     <StyledStart ready={ready}>
       <SessionButton
+        ariaLabel={'Create account button'}
         buttonColor={SessionButtonColor.White}
         onClick={() => {
           dispatch(setDirection('forward'));
@@ -54,6 +55,7 @@ export const Start = () => {
       />
       <SpacerLG />
       <SessionButton
+        ariaLabel={'Restore your session button'}
         buttonColor={SessionButtonColor.White}
         onClick={() => {
           dispatch(setDirection('forward'));