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