diff --git a/app/components/alert_component.html.erb b/app/components/alert_component.html.erb index 37501143a94..57935f872a1 100644 --- a/app/components/alert_component.html.erb +++ b/app/components/alert_component.html.erb @@ -1,4 +1,4 @@ -<%= tag.div(**tag_options, class: css_class, role:) do %> +<%= tag.div(role:, **tag_options, class: css_class) do %>
<%= content_tag(text_tag, content, class: 'usa-alert__text') %>
diff --git a/app/views/two_factor_authentication/otp_verification/show.html.erb b/app/views/two_factor_authentication/otp_verification/show.html.erb index ab64e1e2814..ea4dc882b7a 100644 --- a/app/views/two_factor_authentication/otp_verification/show.html.erb +++ b/app/views/two_factor_authentication/otp_verification/show.html.erb @@ -7,11 +7,19 @@ <% end %> <% if @presenter.otp_expiration.present? %> - <%= render CountdownAlertComponent.new( - show_at_remaining: IdentityConfig.store.otp_expiration_warning_seconds.seconds, - alert_options: { class: 'margin-bottom-4' }, - countdown_options: { expiration: @presenter.otp_expiration }, - ) %> + <%= render CountdownAlertComponent.new( + show_at_remaining: IdentityConfig.store.otp_expiration_warning_seconds.seconds, + alert_options: { class: 'margin-bottom-4', role: 'presentation' }, + countdown_options: { expiration: @presenter.otp_expiration }, + ) %> + +
+ <%= render CountdownAlertComponent.new( + expiration: @presenter.otp_expiration, + show_at_remaining: IdentityConfig.store.otp_expiration_warning_seconds.seconds + 30.seconds, + countdown_options: { expiration: @presenter.otp_expiration, update_interval: 30.seconds }, + ) %> +
<% end %> <%= render PageHeadingComponent.new.with_content(@presenter.header) %> diff --git a/spec/components/countdown_alert_component_spec.rb b/spec/components/countdown_alert_component_spec.rb index 0d897b517eb..aba27b5ae08 100644 --- a/spec/components/countdown_alert_component_spec.rb +++ b/spec/components/countdown_alert_component_spec.rb @@ -71,5 +71,14 @@ expect(rendered).to have_css('.usa-alert[data-foo="bar"]') end + + it 'renders with a defined aria role' do + rendered = render_inline CountdownAlertComponent.new( + countdown_options: { expiration: }, + alert_options: { role: 'region' }, + ) + + expect(rendered).to have_selector('.usa-alert[role="region"]') + end end end