LG11696: Associate TOTP setup fields with visual label

app/components/process_list_component.rb

@@ -20,11 +20,19 @@ def css_class
   end
 
   class ProcessListItemComponent < BaseComponent
-    attr_reader :heading_level, :heading
+    attr_reader :heading_level, :heading, :heading_id
 
-    def initialize(heading_level:, heading:)
+    def initialize(heading_level:, heading:, heading_id: nil)
       @heading_level = heading_level
       @heading = heading
+      @heading_id = heading_id
+    end
+
+    def heading_options
+      options = { class: 'usa-process-list__heading' }
+
+      options[:id] = heading_id if heading_id.present?
+      options
     end
   end
 end

app/components/process_list_item_component.html.erb

@@ -1,4 +1,4 @@
 <li class="usa-process-list__item">
-  <%= content_tag(heading_level, heading, class: 'usa-process-list__heading') %>
+  <%= content_tag(heading_level, heading, **heading_options) %>
   <%= content %>
 </li>

app/views/users/totp_setup/new.html.erb

@@ -19,7 +19,7 @@
 <%= simple_form_for('', method: :patch, html: { class: 'margin-bottom-4' }) do |f| %>
   <fieldset aria-labelledby="totp-intro" class="padding-0 border-0 margin-y-4 margin-x-0">
     <%= render ProcessListComponent.new(connected: true) do |c| %>
-      <%= c.with_item(heading: t('forms.totp_setup.totp_step_1')) do %>
+      <%= c.with_item(heading: t('forms.totp_setup.totp_step_1'), heading_id: 'totp-step-1-label') do %>
         <p><%= t('forms.totp_setup.totp_step_1a') %></p>
         <%= render ValidatedFieldComponent.new(
               form: f,
@@ -28,7 +28,7 @@
               label: false,
               wrapper_html: { class: 'margin-bottom-0' },
               input_html: {
-                aria: { label: t('forms.totp_setup.totp_step_1') },
+                aria: { labelledby: 'totp-step-1-label' },
                 maxlength: 20,
               },
             ) %>
@@ -44,7 +44,7 @@
         </code>
         <%= render ClipboardButtonComponent.new(clipboard_text: @code.upcase, outline: true) %>
       <% end %>
-      <%= c.with_item(heading: t('forms.totp_setup.totp_step_4')) do %>
+      <%= c.with_item(heading: t('forms.totp_setup.totp_step_4'), heading_id: 'totp-step-4-label') do %>
         <%= render OneTimeCodeInputComponent.new(
               form: f,
               transport: nil,
@@ -55,7 +55,7 @@
                   class: 'margin-bottom-0',
                 },
                 input_html: {
-                  aria: { label: t('forms.totp_setup.totp_step_4') },
+                  aria: { labelledby: 'totp-step-4-label' },
                 },
               },
             ) %>

spec/features/remember_device/totp_spec.rb

@@ -26,7 +26,7 @@ def remember_device_and_sign_out_user
       user.password = Features::SessionHelper::VALID_PASSWORD
 
       select_2fa_option('auth_app')
-      fill_in t('forms.totp_setup.totp_step_1'), with: 'App'
+      fill_in_totp_name
       fill_in :code, with: totp_secret_from_page
       check t('forms.messages.remember_device')
       click_submit_default
@@ -47,7 +47,7 @@ def remember_device_and_sign_out_user
       click_on t('account.index.totp_confirm_delete')
       travel_to(10.seconds.from_now) # Travel past the revoked at date from disabling the device
       click_link t('account.index.auth_app_add'), href: authenticator_setup_url
-      fill_in t('forms.totp_setup.totp_step_1'), with: 'App'
+      fill_in_totp_name
       fill_in :code, with: totp_secret_from_page
       check t('forms.messages.remember_device')
       click_submit_default

spec/features/remember_device/user_opted_preference_spec.rb

@@ -10,7 +10,8 @@
         select_2fa_option('auth_app')
 
         secret = find('#qr-code').text
-        fill_in t('forms.totp_setup.totp_step_1'), with: 'App'
+
+        fill_in_totp_name
         fill_in 'code', with: generate_totp_code(secret)
         uncheck 'remember_device'
 

spec/features/two_factor_authentication/multiple_mfa_sign_up_spec.rb

@@ -72,7 +72,8 @@
       expect(page).to have_current_path(authentication_methods_setup_path)
 
       select_2fa_option('auth_app')
-      fill_in t('forms.totp_setup.totp_step_1'), with: 'App'
+
+      fill_in_totp_name
 
       secret = find('#qr-code').text
       totp = generate_totp_code(secret)
@@ -97,7 +98,8 @@
       click_continue
 
       expect(current_path).to eq authenticator_setup_path
-      fill_in t('forms.totp_setup.totp_step_1'), with: 'App'
+
+      fill_in_totp_name
 
       secret = find('#qr-code').text
       totp = generate_totp_code(secret)

spec/features/users/totp_management_spec.rb

@@ -45,8 +45,8 @@
 
       expect(
         [
-          page.find_field(t('forms.totp_setup.totp_step_1')),
-          page.find_field(t('forms.totp_setup.totp_step_4')),
+          page.find('[aria-labelledby="totp-step-1-label"]'),
+          page.find('[aria-labelledby="totp-step-4-label"]'),
         ],
       ).to be_logically_grouped(t('forms.totp_setup.totp_intro'))
 

spec/support/features/session_helper.rb

@@ -114,6 +114,14 @@ def fill_in_credentials_and_submit(email, password)
       click_button t('links.sign_in')
     end
 
+    def fill_in_totp_name(nickname = 'App')
+      fill_in 'name', with: nickname
+    end
+
+    def fill_in_totp_code
+      fill_in 'code', with: generate_totp_code(secret)
+    end
+
     def continue_as(email = nil, password = VALID_PASSWORD)
       return unless current_url.include?(user_authorization_confirmation_path)
 
@@ -567,10 +575,11 @@ def set_up_2fa_with_authenticator_app
 
       expect(page).to have_current_path authenticator_setup_path
 
-      fill_in t('forms.totp_setup.totp_step_1'), with: 'App'
+      fill_in_totp_name
 
       secret = find('#qr-code').text
-      fill_in 'code', with: generate_totp_code(secret)
+      fill_in :code, with: secret
+
       click_button 'Submit'
     end
 

spec/views/users/totp_setup/new.html.erb_spec.rb

@@ -49,8 +49,21 @@
     it 'has labelled fields' do
       render
 
-      expect(rendered).to have_field(t('forms.totp_setup.totp_step_1'))
-      expect(rendered).to have_field(t('forms.totp_setup.totp_step_4'))
+      expect(rendered).to have_selector(
+        'h2#totp-step-1-label',
+        text: t('forms.totp_setup.totp_step_1'),
+      )
+      expect(rendered).to have_selector(
+        'h2#totp-step-4-label',
+        text: t('forms.totp_setup.totp_step_4'),
+      )
+    end
+
+    it 'has aria labels for TOTP' do
+      render
+
+      expect(rendered).to have_selector('[aria-labelledby="totp-step-1-label"]')
+      expect(rendered).to have_selector('[aria-labelledby="totp-step-4-label"]')
     end
   end