diff --git a/app/components/validated_field_component.html.erb b/app/components/validated_field_component.html.erb index a52c89c3478..b685769e86a 100644 --- a/app/components/validated_field_component.html.erb +++ b/app/components/validated_field_component.html.erb @@ -21,9 +21,13 @@ describedby: [ *tag_options.dig(:input_html, :aria, :describedby), "validated-field-error-#{unique_id}", + "validated-field-hint-#{unique_id}", ], }, }, + hint_html: { + id: "validated-field-hint-#{unique_id}", + }, error_html: { id: "validated-field-error-#{unique_id}" }, ), ) %> diff --git a/app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.spec.tsx b/app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.spec.tsx index 64dcfe23067..57d5d935949 100644 --- a/app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.spec.tsx +++ b/app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.spec.tsx @@ -111,9 +111,9 @@ describe('PasswordConfirmStep', () => { }); it('navigates to forgot password subpage', async () => { - const { getByRole } = render(); + const { getByText } = render(); - await userEvent.click(getByRole('link', { name: 'idv.forgot_password.link_text' })); + await userEvent.click(getByText('idv.forgot_password.link_text')); expect(window.location.pathname).to.equal('/password_confirm/forgot_password'); expect(analytics.trackEvent).to.have.been.calledWith('IdV: forgot password visited'); @@ -121,9 +121,9 @@ describe('PasswordConfirmStep', () => { }); it('navigates back from forgot password subpage', async () => { - const { getByRole } = render(); + const { getByRole, getByText } = render(); - await userEvent.click(getByRole('link', { name: 'idv.forgot_password.link_text' })); + await userEvent.click(getByText('idv.forgot_password.link_text')); await userEvent.click(getByRole('link', { name: 'idv.forgot_password.try_again' })); expect(window.location.pathname).to.equal('/password_confirm'); diff --git a/app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.tsx b/app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.tsx index 228a81a8f1f..d1edc50402e 100644 --- a/app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.tsx +++ b/app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.tsx @@ -92,18 +92,9 @@ function PasswordConfirmStep({ errors, registerField, onChange, value }: Passwor required />
- {formatHTML( - t('idv.forgot_password.link_html', { - link: ``, - }), - { - button: ({ children }) => ( - - {children} - - ), - }, - )} + + {t('idv.forgot_password.link_text')} +
diff --git a/app/views/idv/review/new.html.erb b/app/views/idv/review/new.html.erb index a398e8833e3..26266a254ef 100644 --- a/app/views/idv/review/new.html.erb +++ b/app/views/idv/review/new.html.erb @@ -32,10 +32,7 @@ wrapper_html: { class: 'margin-bottom-0' }, ) %>
- <%= t( - 'idv.forgot_password.link_html', - link: link_to(t('idv.forgot_password.link_text'), idv_forgot_password_url, class: 'margin-left-1'), - ) %> + <%= link_to(t('idv.forgot_password.link_text'), idv_forgot_password_url, class: 'margin-left-1') %>
<%= render AccordionComponent.new do |c| %> <% c.header { t('idv.messages.review.intro') } %> diff --git a/config/locales/idv/en.yml b/config/locales/idv/en.yml index 4ed5dfdeb77..79113718ed9 100644 --- a/config/locales/idv/en.yml +++ b/config/locales/idv/en.yml @@ -85,8 +85,7 @@ en: timeout: We are experiencing higher than usual wait time processing your request. Please try again. forgot_password: - link_html: Forgot password? %{link} - link_text: Follow these instructions + link_text: Forgot password? modal_header: Are you sure you can’t remember your password? reset_password: Reset password try_again: Try again diff --git a/config/locales/idv/es.yml b/config/locales/idv/es.yml index c0e4f5ef075..1b4a287e601 100644 --- a/config/locales/idv/es.yml +++ b/config/locales/idv/es.yml @@ -91,8 +91,7 @@ es: timeout: Estamos experimentando un tiempo de espera superior al habitual al procesar su solicitud. Inténtalo de nuevo. forgot_password: - link_html: '¿Se te olvidó tu contraseña? %{link}' - link_text: Siga estas instrucciones + link_text: '¿Se te olvidó tu contraseña?' modal_header: '¿Estás seguro de que no puedes recordar tu contraseña?' reset_password: Restablecer la contraseña try_again: Inténtalo de nuevo diff --git a/config/locales/idv/fr.yml b/config/locales/idv/fr.yml index a0edbf7a701..171ec54f970 100644 --- a/config/locales/idv/fr.yml +++ b/config/locales/idv/fr.yml @@ -95,8 +95,7 @@ fr: timeout: Le temps d’attente pour le traitement de votre demande est plus long que d’habitude Veuillez réessayer. forgot_password: - link_html: Mot de passe oublié? %{link} - link_text: Suivez ces instructions + link_text: Mot de passe oublié? modal_header: Êtes-vous sûr de ne pas pouvoir vous souvenir de votre mot de passe? reset_password: Réinitialiser le mot de passe try_again: Réessayer diff --git a/spec/components/validated_field_component_spec.rb b/spec/components/validated_field_component_spec.rb index 7d9e890620d..3ad4581a286 100644 --- a/spec/components/validated_field_component_spec.rb +++ b/spec/components/validated_field_component_spec.rb @@ -28,7 +28,10 @@ it 'renders aria-describedby to establish connection between input and error message' do field = rendered.at_css('input') - expect(field.attr('aria-describedby')).to start_with('validated-field-error-') + expect(field.attr('aria-describedby').split(' ')).to include( + start_with('validated-field-hint-'), + start_with('validated-field-error-'), + ) end describe 'error message strings' do @@ -73,7 +76,8 @@ it 'merges aria-describedby with the one applied by the field' do field = rendered.at_css('input') - expect(field.attr('aria-describedby')).to start_with('foo validated-field-error-') + expect(field.attr('aria-describedby')).to include('validated-field-error-') + expect(field.attr('aria-describedby')).to include('foo') end end end