From 341fa8b7745b8b55446e3799ae4a9296ac8d561c Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Mon, 27 May 2024 12:00:08 +1000
Subject: [PATCH] feat: recovery password settings flow done

added aria label and datatestid support to SessionQRCode
---
 ts/components/SessionQRCode.tsx                            | 7 ++++++-
 ts/components/buttons/CopyToClipboardButton.tsx            | 2 +-
 ts/components/registration/components/BackButton.tsx       | 1 +
 .../settings/section/CategoryRecoveryPassword.tsx          | 5 ++++-
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/ts/components/SessionQRCode.tsx b/ts/components/SessionQRCode.tsx
index c4b131c49..856045dba 100644
--- a/ts/components/SessionQRCode.tsx
+++ b/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
diff --git a/ts/components/buttons/CopyToClipboardButton.tsx b/ts/components/buttons/CopyToClipboardButton.tsx
index 51839f3eb..fdbd5b724 100644
--- a/ts/components/buttons/CopyToClipboardButton.tsx
+++ b/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'}
diff --git a/ts/components/registration/components/BackButton.tsx b/ts/components/registration/components/BackButton.tsx
index c5fed8573..222719c2d 100644
--- a/ts/components/registration/components/BackButton.tsx
+++ b/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)"
diff --git a/ts/components/settings/section/CategoryRecoveryPassword.tsx b/ts/components/settings/section/CategoryRecoveryPassword.tsx
index 3563dba29..54ca60dc6 100644
--- a/ts/components/settings/section/CategoryRecoveryPassword.tsx
+++ b/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 />