feat: account restoration flow done

updated some testids and aria labels, consolidated continue buttons into one component

ts/components/inputs/SessionInput.tsx

@@ -177,19 +177,21 @@ const ShowHideButton = (props: {
   if (props.forceShow) {
     return (
       <SessionIconButton
+        ariaLabel={'Hide recovery phrase toggle'}
         iconType={'eyeDisabled'}
         iconColor={props.error ? 'var(--danger-color)' : 'var(--text-primary-color)'}
         iconSize="huge"
         onClick={props.toggleForceShow}
         style={style}
         aria-label={'Show or hide input'}
-        dataTestId="reveal-recovery-phrase-toggle"
+        dataTestId="hide-recovery-phrase-toggle"
       />
     );
   }
 
   return (
     <SessionIconButton
+      ariaLabel={'Reveal recovery phrase toggle'}
       iconType={'eye'}
       iconColor={props.error ? 'var(--danger-color)' : 'var(--text-primary-color)'}
       iconSize="huge"

ts/components/leftpane/LeftPaneMessageSection.tsx

@@ -82,7 +82,7 @@ export const LeftPaneMessageSection = () => {
     return <ConversationListItem key={key} style={style} conversationId={conversationId} />;
   };
 
-  const renderList = () => {
+  const ConversationList = () => {
     if (!isEmpty(searchTerm)) {
       return <SearchResults />;
     }
@@ -113,7 +113,7 @@ export const LeftPaneMessageSection = () => {
     );
   };
 
-  const renderConversations = () => {
+  const Conversations = () => {
     return (
       <StyledConversationListContent>
         <SessionSearchInput />
@@ -122,7 +122,7 @@ export const LeftPaneMessageSection = () => {
             window.inboxStore?.dispatch(setLeftOverlayMode('message-requests'));
           }}
         />
-        {renderList()}
+        <ConversationList />
       </StyledConversationListContent>
     );
   };
@@ -130,7 +130,7 @@ export const LeftPaneMessageSection = () => {
   return (
     <StyledLeftPaneContent>
       <LeftPaneSectionHeader />
-      {leftOverlayMode ? <ClosableOverlay /> : renderConversations()}
+      {leftOverlayMode ? <ClosableOverlay /> : <Conversations />}
     </StyledLeftPaneContent>
   );
 };

ts/components/loading/bar/SessionProgressBar.tsx

@@ -72,7 +72,12 @@ export function SessionProgressBar(props: Props) {
         {showPercentage ? <StyledText>{Math.floor(progress)}%</StyledText> : null}
       </Flex>
       {subtitle || showPercentage ? <SpacerXL /> : null}
-      <ProgressContainer color={backgroundColor} style={{ width }} data-testid="loading-animation">
+      <ProgressContainer
+        aria-label="Loading animation"
+        color={backgroundColor}
+        style={{ width }}
+        data-testid="loading-animation"
+      >
         <Progress
           color={color}
           initial={{ width: `${initialValue}%` }}

ts/components/registration/components/ContinueButton.tsx

@@ -0,0 +1,21 @@
+import { SessionButton, SessionButtonColor } from '../../basic/SessionButton';
+
+type Props = {
+  onClick: () => void | Promise<void>;
+  disabled: boolean;
+};
+
+export const ContinueButton = (props: Props) => {
+  const { onClick, disabled } = props;
+
+  return (
+    <SessionButton
+      ariaLabel="Continue"
+      buttonColor={SessionButtonColor.White}
+      onClick={onClick}
+      text={window.i18n('continue')}
+      disabled={disabled}
+      dataTestId="continue-button"
+    />
+  );
+};

ts/components/registration/components/index.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { BackButton } from './BackButton';
+import { ContinueButton } from './ContinueButton';
 import { Hero } from './Hero';
 import { OnboardContainer } from './OnboardingContainer';
 
@@ -15,4 +16,4 @@ const OnboardDescription = styled.p`
   letter-spacing: normal;
 `;
 
-export { BackButton, Hero, OnboardContainer, OnboardDescription, OnboardHeading };
+export { BackButton, ContinueButton, Hero, OnboardContainer, OnboardDescription, OnboardHeading };

ts/components/registration/stages/CreateAccount.tsx

@@ -26,11 +26,10 @@ import {
 } from '../../../util/accountManager';
 import { Storage, setSignWithRecoveryPhrase } from '../../../util/storage';
 import { Flex } from '../../basic/Flex';
-import { SessionButton, SessionButtonColor } from '../../basic/SessionButton';
 import { SpacerLG, SpacerSM } from '../../basic/Text';
 import { SessionInput } from '../../inputs';
 import { resetRegistration } from '../RegistrationStages';
-import { OnboardDescription, OnboardHeading } from '../components';
+import { ContinueButton, OnboardDescription, OnboardHeading } from '../components';
 import { BackButtonWithinContainer } from '../components/BackButton';
 import { displayNameIsValid, sanitizeDisplayNameOrToast } from '../utils';
 
@@ -143,13 +142,9 @@ export const CreateAccount = () => {
           inputDataTestId="display-name-input"
         />
         <SpacerLG />
-        <SessionButton
+        <ContinueButton
-          ariaLabel="Continue"
-          buttonColor={SessionButtonColor.White}
           onClick={signUpWithDetails}
-          text={window.i18n('continue')}
           disabled={isEmpty(displayName) || !isEmpty(displayNameError)}
-          dataTestId="continue-button"
         />
       </Flex>
     </BackButtonWithinContainer>

ts/components/registration/stages/RestoreAccount.tsx

@@ -32,13 +32,12 @@ import {
 } from '../../../util/accountManager';
 import { setSignInByLinking, setSignWithRecoveryPhrase } from '../../../util/storage';
 import { Flex } from '../../basic/Flex';
-import { SessionButton, SessionButtonColor } from '../../basic/SessionButton';
 import { SpacerLG, SpacerSM } from '../../basic/Text';
 import { SessionIcon } from '../../icon';
 import { SessionInput } from '../../inputs';
 import { SessionProgressBar } from '../../loading';
 import { resetRegistration } from '../RegistrationStages';
-import { OnboardDescription, OnboardHeading } from '../components';
+import { ContinueButton, OnboardDescription, OnboardHeading } from '../components';
 import { BackButtonWithinContainer } from '../components/BackButton';
 import { useRecoveryProgressEffect } from '../hooks';
 import { displayNameIsValid, sanitizeDisplayNameOrToast } from '../utils';
@@ -226,6 +225,7 @@ export const RestoreAccount = () => {
                 <OnboardDescription>{window.i18n('onboardingRecoveryPassword')}</OnboardDescription>
                 <SpacerLG />
                 <SessionInput
+                  ariaLabel="Recovery phrase input"
                   autoFocus={true}
                   disableOnBlurEvent={true}
                   type="password"
@@ -245,12 +245,9 @@ export const RestoreAccount = () => {
                   inputDataTestId="recovery-phrase-input"
                 />
                 <SpacerLG />
-                <SessionButton
+                <ContinueButton
-                  buttonColor={SessionButtonColor.White}
                   onClick={recoverAndFetchDisplayName}
-                  text={window.i18n('continue')}
                   disabled={!(!!recoveryPassword && !recoveryPasswordError)}
-                  dataTestId="continue-button"
                 />
               </>
             ) : (
@@ -260,6 +257,7 @@ export const RestoreAccount = () => {
                 <OnboardDescription>{window.i18n('displayNameErrorNew')}</OnboardDescription>
                 <SpacerLG />
                 <SessionInput
+                  ariaLabel="Enter display name"
                   autoFocus={true}
                   disableOnBlurEvent={true}
                   type="text"
@@ -278,17 +276,14 @@ export const RestoreAccount = () => {
                   inputDataTestId="display-name-input"
                 />
                 <SpacerLG />
-                <SessionButton
+                <ContinueButton
-                  buttonColor={SessionButtonColor.White}
                   onClick={recoverAndEnterDisplayName}
-                  text={window.i18n('continue')}
                   disabled={
                     isEmpty(recoveryPassword) ||
                     !isEmpty(recoveryPasswordError) ||
                     isEmpty(displayName) ||
                     !isEmpty(displayNameError)
                   }
-                  dataTestId="continue-button"
                 />
               </Flex>
             )}
@@ -304,7 +299,9 @@ export const RestoreAccount = () => {
         >
           <SessionProgressBar
             initialValue={
-              step !== AccountRestoration.Finished && step !== AccountRestoration.Complete ? 0 : 100
+              step !== AccountRestoration.Finished && step !== AccountRestoration.Complete
+                ? progress
+                : 100
             }
             progress={progress}
             margin={'0'}