diff --git a/ts/components/inputs/SessionInput.tsx b/ts/components/inputs/SessionInput.tsx
index e8bb2e4fa..891749311 100644
--- a/ts/components/inputs/SessionInput.tsx
+++ b/ts/components/inputs/SessionInput.tsx
@@ -160,11 +160,24 @@ const ErrorItem = (props: { id: string; error: string }) => {
);
};
-const ShowHideButton = (props: {
+type ShowHideStrings = { hide: string; show: string };
+type ShowHideButtonProps = {
forceShow: boolean;
toggleForceShow: () => void;
error: boolean;
-}) => {
+ ariaLabels?: ShowHideStrings;
+ dataTestIds?: ShowHideStrings;
+};
+
+const ShowHideButton = (props: ShowHideButtonProps) => {
+ const {
+ forceShow,
+ toggleForceShow,
+ error,
+ ariaLabels = { hide: 'Hide input text button', show: 'Show input text button' },
+ dataTestIds = { hide: 'hide-input-text-toggle', show: 'show-input-text-toggle' },
+ } = props;
+
const htmlDirection = useHTMLDirection();
const style: CSSProperties = {
position: 'absolute',
@@ -174,30 +187,29 @@ const ShowHideButton = (props: {
right: htmlDirection === 'ltr' ? 'var(--margins-sm)' : undefined,
};
- if (props.forceShow) {
+ if (forceShow) {
return (
);
}
return (
);
};
@@ -213,7 +225,6 @@ type Props = {
placeholder?: string;
ariaLabel?: string;
maxLength?: number;
- enableShowHide?: boolean;
onValueChanged?: (value: string) => any;
onEnterPressed?: (value: string) => any;
autoFocus?: boolean;
@@ -221,6 +232,9 @@ type Props = {
inputRef?: any;
inputDataTestId?: string;
id?: string;
+ enableShowHide?: boolean;
+ showHideAriaLabels?: ShowHideStrings;
+ showHideDataTestIds?: ShowHideStrings;
ctaButton?: ReactNode;
monospaced?: boolean;
textSize?: TextSizes;
@@ -239,7 +253,6 @@ export const SessionInput = (props: Props) => {
value,
ariaLabel,
maxLength,
- enableShowHide,
error,
onValueChanged,
onEnterPressed,
@@ -248,6 +261,9 @@ export const SessionInput = (props: Props) => {
inputRef,
inputDataTestId,
id = 'session-input-floating-label',
+ enableShowHide,
+ showHideAriaLabels,
+ showHideDataTestIds,
ctaButton,
monospaced,
textSize,
@@ -368,6 +384,8 @@ export const SessionInput = (props: Props) => {
setForceShow(!forceShow);
}}
error={Boolean(errorString)}
+ ariaLabels={showHideAriaLabels}
+ dataTestIds={showHideDataTestIds}
/>
)}
diff --git a/ts/components/registration/stages/RestoreAccount.tsx b/ts/components/registration/stages/RestoreAccount.tsx
index 6e50561bf..c6beb904d 100644
--- a/ts/components/registration/stages/RestoreAccount.tsx
+++ b/ts/components/registration/stages/RestoreAccount.tsx
@@ -242,6 +242,14 @@ export const RestoreAccount = () => {
onEnterPressed={recoverAndFetchDisplayName}
error={recoveryPasswordError}
enableShowHide={true}
+ showHideAriaLabels={{
+ hide: 'Hide recovery phrase toggle',
+ show: 'Reveal recovery phrase toggle',
+ }}
+ showHideDataTestIds={{
+ hide: 'hide-recovery-phrase-toggle',
+ show: 'reveal-recovery-phrase-toggle',
+ }}
inputDataTestId="recovery-phrase-input"
/>