feat: account creation flow done

updated some testids and aria labels, SessionInput now has aria label support

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>
         </>

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

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"

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)"

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')}

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'));