diff --git a/app/components/process_list_component.rb b/app/components/process_list_component.rb index 1ee0c5b2b7a..ea3879c26d6 100644 --- a/app/components/process_list_component.rb +++ b/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 diff --git a/app/components/process_list_item_component.html.erb b/app/components/process_list_item_component.html.erb index d8c62058fd8..a796534706f 100644 --- a/app/components/process_list_item_component.html.erb +++ b/app/components/process_list_item_component.html.erb @@ -1,4 +1,4 @@
  • - <%= content_tag(heading_level, heading, class: 'usa-process-list__heading') %> + <%= content_tag(heading_level, heading, **heading_options) %> <%= content %>
  • diff --git a/app/views/users/totp_setup/new.html.erb b/app/views/users/totp_setup/new.html.erb index 1f5517da8be..7055d632a9e 100644 --- a/app/views/users/totp_setup/new.html.erb +++ b/app/views/users/totp_setup/new.html.erb @@ -19,7 +19,7 @@ <%= simple_form_for('', method: :patch, html: { class: 'margin-bottom-4' }) do |f| %>
    <%= 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 %>

    <%= t('forms.totp_setup.totp_step_1a') %>

    <%= 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 @@ <%= 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' }, }, }, ) %> diff --git a/spec/features/remember_device/totp_spec.rb b/spec/features/remember_device/totp_spec.rb index ddbce2befad..207b6fd6d62 100644 --- a/spec/features/remember_device/totp_spec.rb +++ b/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 diff --git a/spec/features/remember_device/user_opted_preference_spec.rb b/spec/features/remember_device/user_opted_preference_spec.rb index 177bace973c..c6cee94e1cc 100644 --- a/spec/features/remember_device/user_opted_preference_spec.rb +++ b/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' diff --git a/spec/features/two_factor_authentication/multiple_mfa_sign_up_spec.rb b/spec/features/two_factor_authentication/multiple_mfa_sign_up_spec.rb index 4e8a1d3b3bd..b3523486780 100644 --- a/spec/features/two_factor_authentication/multiple_mfa_sign_up_spec.rb +++ b/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) diff --git a/spec/features/users/totp_management_spec.rb b/spec/features/users/totp_management_spec.rb index e7610030323..de496c4e0c5 100644 --- a/spec/features/users/totp_management_spec.rb +++ b/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')) diff --git a/spec/support/features/session_helper.rb b/spec/support/features/session_helper.rb index c786310c475..a7d533d86d3 100644 --- a/spec/support/features/session_helper.rb +++ b/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 diff --git a/spec/views/users/totp_setup/new.html.erb_spec.rb b/spec/views/users/totp_setup/new.html.erb_spec.rb index ee72c928b39..7496d8d5f57 100644 --- a/spec/views/users/totp_setup/new.html.erb_spec.rb +++ b/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