LG-15064: Countdown alerts for expiring phone OTP announces too frequently

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 %>
   <div class="usa-alert__body">
     <%= content_tag(text_tag, content, class: 'usa-alert__text') %>
   </div>

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 },
+        ) %>
+
+    <div class="usa-sr-only" role="timer" aria-live="polite" aria-atomic="true">
+      <%= 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 },
+          ) %>
+    </div>
 <% end %>
 
 <%= render PageHeadingComponent.new.with_content(@presenter.header) %>

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