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

app/components/countdown_alert_component.rb

@@ -1,7 +1,8 @@
 # frozen_string_literal: true
 
 class CountdownAlertComponent < BaseComponent
-  attr_reader :show_at_remaining, :alert_options, :countdown_options, :tag_options
+  attr_reader :show_at_remaining, :alert_options, :countdown_options,
+              :tag_options
 
   def initialize(
     show_at_remaining: nil,

app/controllers/two_factor_authentication/otp_verification_controller.rb

@@ -5,6 +5,7 @@ class OtpVerificationController < ApplicationController
     include TwoFactorAuthenticatable
     include MfaSetupConcern
     include NewDeviceConcern
+    include SessionTimeoutWarningHelper
 
     before_action :confirm_multiple_factors_enabled
     before_action :redirect_if_blank_phone, only: [:show]

app/javascript/packages/countdown/countdown-alert-element.spec.ts

@@ -5,9 +5,14 @@ import './countdown-element';
 describe('CountdownAlertElement', () => {
   const sandbox = useSandbox({ useFakeTimers: true });
 
-  function createElement({ showAtRemaining }: { showAtRemaining?: number } = {}) {
+  function createElement({
+    showAtRemaining,
+    screenReaderFrequency,
+  }: { showAtRemaining?: number; screenReaderFrequency?: number } = {}) {
     document.body.innerHTML = `
-      <lg-countdown-alert ${showAtRemaining ? `show-at-remaining="${showAtRemaining}"` : ''}>
+      <lg-countdown-alert ${showAtRemaining ? `show-at-remaining="${showAtRemaining}"` : ''} ${
+        screenReaderFrequency ? `screen-reader-frequency="${screenReaderFrequency}"` : ''
+      }>
         <div class="usa-alert usa-alert--info margin-bottom-4 usa-alert--info-time" role="status">
           <div class="usa-alert__body">
             <p class="usa-alert__text">

app/javascript/packages/countdown/countdown-alert-element.ts

@@ -24,6 +24,9 @@ export class CountdownAlertElement extends HTMLElement {
 
   show() {
     this.classList.remove('display-none');
+    if (this.showAtRemaining) {
+      this.querySelector('lg-countdown')?.setAttribute('aria-live', 'off');
+    }
   }
 }
 

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' },
+          countdown_options: { expiration: @presenter.otp_expiration },
+        ) %>
+
+    <p class="usa-sr-only" role="timer" aria-live="polite" aria-atomic="true">
+      <%= render CountdownComponent.new(
+            expiration: @presenter.otp_expiration,
+            update_interval: 30.seconds,
+            start_immediately: true,
+          ) %>
+    </p>
 <% end %>
 
 <%= render PageHeadingComponent.new.with_content(@presenter.header) %>