LG-7073 Hint text on the form fields for screen readers

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}" },
         ),
       ) %>

app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.spec.tsx

@@ -111,19 +111,19 @@ describe('PasswordConfirmStep', () => {
     });
 
     it('navigates to forgot password subpage', async () => {
-      const { getByRole } = render(<PasswordConfirmStep {...DEFAULT_PROPS} />);
+      const { getByText } = render(<PasswordConfirmStep {...DEFAULT_PROPS} />);
 
-      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');
       expect(analytics.trackEvent).not.to.have.been.calledWith('IdV: password confirm visited');
     });
 
     it('navigates back from forgot password subpage', async () => {
-      const { getByRole } = render(<PasswordConfirmStep {...DEFAULT_PROPS} />);
+      const { getByRole, getByText } = render(<PasswordConfirmStep {...DEFAULT_PROPS} />);
 
-      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');

app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.tsx

@@ -92,18 +92,9 @@ function PasswordConfirmStep({ errors, registerField, onChange, value }: Passwor
         required
       />
       <div className="text-right margin-top-2 margin-bottom-4">
-        {formatHTML(
-          t('idv.forgot_password.link_html', {
-            link: `<button>${t('idv.forgot_password.link_text')}</button>`,
-          }),
-          {
-            button: ({ children }) => (
-              <HistoryLink basePath={stepPath} step={FORGOT_PASSWORD_PATH}>
-                {children}
-              </HistoryLink>
-            ),
-          },
-        )}
+        <HistoryLink basePath={stepPath} step={FORGOT_PASSWORD_PATH}>
+          {t('idv.forgot_password.link_text')}
+        </HistoryLink>
       </div>
       <Accordion header={t('idv.messages.review.intro')}>
         <PersonalInfoSummary pii={value} />

app/views/idv/review/new.html.erb

@@ -32,10 +32,7 @@
         wrapper_html: { class: 'margin-bottom-0' },
       ) %>
   <div class="text-right margin-top-2 margin-bottom-4">
-    <%= 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') %>
   </div>
   <%= render AccordionComponent.new do |c| %>
     <% c.header { t('idv.messages.review.intro') } %>

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

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

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

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