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

[jmdembe]

🎫 Ticket

Link to the relevant ticket:
LG-15064

🛠 Summary of changes

This ticket addresses a bug where the alert component announces the timer countdown every second.

[aduth]

Rather than adding a new option here, did you consider using the approach that we use in the session timeout modal? Namely, having two separate countdowns, one of which is used for assistive technology announces at a slower interval:

identity-idp/app/views/session_timeout/_warning.html.erb

Lines 10 to 38 in 2b6458b

	<p>
	<%= t(
	# i18n-tasks-use t('notices.timeout_warning.signed_in.message_html')
	# i18n-tasks-use t('notices.timeout_warning.partially_signed_in.message_html')
	'message_html',
	scope: modal_presenter.translation_scope,
	time_left_in_session_html: render(
	CountdownComponent.new(
	expiration: Time.zone.now,
	start_immediately: false,
	),
	),
	) %>
	</p>
	<p class="usa-sr-only" id="<%= c.description_id %>" role="timer" aria-live="polite" aria-atomic="true">
	<%= t(
	# i18n-tasks-use t('notices.timeout_warning.signed_in.live_region_message_html')
	# i18n-tasks-use t('notices.timeout_warning.partially_signed_in.live_region_message_html')
	'live_region_message_html',
	scope: modal_presenter.translation_scope,
	time_left_in_session_html: render(
	CountdownComponent.new(
	expiration: Time.zone.now,
	update_interval: 30.seconds,
	start_immediately: false,
	),
	),
	) %>
	</p>

[jmdembe]

I thought that I was going in this direction, but I am pivoting because I originally thought it was to use the one element.