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