feat: recovery password settings flow done

added aria label and datatestid support to SessionQRCode

ts/components/SessionQRCode.tsx

@@ -39,6 +39,8 @@ export type SessionQRCodeProps = {
   logoIsSVG?: boolean;
   theme?: string;
   ignoreTheme?: boolean;
+  ariaLabel?: string;
+  dataTestId?: string;
   style?: CSSProperties;
 };
 
@@ -55,6 +57,8 @@ export function SessionQRCode(props: SessionQRCodeProps) {
     logoIsSVG,
     theme,
     ignoreTheme,
+    ariaLabel,
+    dataTestId,
     style,
   } = props;
 
@@ -110,7 +114,7 @@ export function SessionQRCode(props: SessionQRCodeProps) {
       container={true}
       justifyContent="center"
       alignItems="center"
-      aria-label={window.i18n('clickToTrustContact')}
+      aria-label={ariaLabel || 'QR code'}
       title={window.i18n('clickToTrustContact')}
       canvasId={id}
       size={size}
@@ -129,6 +133,7 @@ export function SessionQRCode(props: SessionQRCodeProps) {
       initial={{ opacity: 0 }}
       animate={{ opacity: loading ? 0 : 1 }}
       transition={{ duration: THEME_GLOBALS['--default-duration-seconds'] }}
+      data-testId={dataTestId || 'session-qr-code'}
       style={style}
     >
       <QRCode

ts/components/buttons/CopyToClipboardButton.tsx

@@ -89,7 +89,7 @@ export const CopyToClipboardIcon = (props: CopyToClipboardIconProps) => {
 
   return (
     <SessionIconButton
-      aria-label={'copy to clipboard button'}
+      aria-label={'copy to clipboard icon button'}
       {...props}
       className={className}
       iconType={'copy'}

ts/components/registration/components/BackButton.tsx

@@ -41,6 +41,7 @@ export const BackButton = ({ callback }: { callback?: () => void }) => {
 
   return (
     <SessionIconButton
+      ariaLabel="Back button"
       iconSize="huge"
       iconType="chevron"
       iconColor="var(--color-text-primary)"

ts/components/settings/section/CategoryRecoveryPassword.tsx

@@ -113,9 +113,12 @@ export const SettingsCategoryRecoveryPassword = () => {
             logoHeight={56}
             logoIsSVG={true}
             theme={theme}
+            ariaLabel={'Recovery Password QR Code'}
+            dataTestId={'session-recovery-passwod'}
           />
         ) : (
           <StyledRecoveryPassword
+            aria-label="Recovery password"
             container={true}
             flexDirection={'row'}
             justifyContent={'space-between'}
@@ -125,7 +128,7 @@ export const SettingsCategoryRecoveryPassword = () => {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: THEME_GLOBALS['--default-duration-seconds'] }}
-            data-testid="recovery-phrase-seed-modal"
+            data-testid="recovery-password-seed-modal"
           >
             {recoveryPhrase}
             <SpacerSM />