Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 16 commits into
base: main
Choose a base branch
from
Draft

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

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
cfb0a6d
add update interval to info on otp expirateion screen
jmdembe Feb 18, 2025
bb0c9ac
add class and value for screen reader frequency
jmdembe Feb 19, 2025
e704197
remove update frequency
jmdembe Feb 19, 2025
ee4abb0
use store value instead of hardcoded number
jmdembe Feb 19, 2025
3b17adf
update documentation and test setup
jmdembe Feb 19, 2025
566a04b
add test for new class
jmdembe Feb 19, 2025
2ddb808
first round of lintfixes for tests
jmdembe Feb 19, 2025
b78cb27
udo changes
jmdembe Feb 21, 2025
c0c0bcc
trying with the countdown component in screen reader container
jmdembe Feb 21, 2025
3ffc187
clean up syntax
jmdembe Feb 21, 2025
ad641ae
change start immediately
jmdembe Feb 21, 2025
06a9f5c
WIP: lintfix and creating untested modal
jmdembe Feb 21, 2025
fd12c11
clean up readme file
jmdembe Feb 21, 2025
a49d509
more changes to alerts
jmdembe Feb 21, 2025
49dc930
positive step: turn `aria-live` to off when alert appears so that we …
jmdembe Feb 21, 2025
c11b920
lintfix: remove console.log
jmdembe Feb 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion app/components/countdown_alert_component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
# frozen_string_literal: true

class CountdownAlertComponent < BaseComponent
attr_reader :show_at_remaining, :alert_options, :countdown_options, :tag_options
attr_reader :show_at_remaining, :screen_reader_frequency, :alert_options, :countdown_options,
:tag_options

def initialize(
screen_reader_frequency: nil,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

show_at_remaining: nil,
alert_options: {},
countdown_options: {},
Expand All @@ -13,6 +15,7 @@ def initialize(
@alert_options = alert_options
@countdown_options = countdown_options
@tag_options = tag_options
@screen_reader_frequency = screen_reader_frequency
end

def call
Expand All @@ -22,6 +25,7 @@ def call
**tag_options,
class: css_class,
'show-at-remaining': show_at_remaining&.in_milliseconds,
'screen-reader-frequency': screen_reader_frequency&.in_milliseconds,
)
end

Expand Down
2 changes: 1 addition & 1 deletion app/javascript/packages/countdown/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import '@18f/identity-countdown/countdown-alert-element';
The custom element will implement the countdown alert behavior, but all markup must already exist.

```html
<lg-countdown-alert show-at-remaining="150000">
<lg-countdown-alert show-at-remaining="150000" screen-reader-frequency="30000">
<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">
Expand Down
9 changes: 7 additions & 2 deletions app/javascript/packages/countdown/countdown-alert-element.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
1 change: 1 addition & 0 deletions app/views/two_factor_authentication/otp_verification/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<% if @presenter.otp_expiration.present? %>
<%= render CountdownAlertComponent.new(
show_at_remaining: IdentityConfig.store.otp_expiration_warning_seconds.seconds,
screen_reader_frequency: IdentityConfig.store.screen_reader_frequency.seconds,
alert_options: { class: 'margin-bottom-4' },
countdown_options: { expiration: @presenter.otp_expiration },
) %>
Expand Down
1 change: 1 addition & 0 deletions config/application.yml.default
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,6 +370,7 @@ s3_report_public_bucket_prefix: login-gov-pubdata
s3_reports_enabled: false
saml_endpoint_configs: '[]'
saml_secret_rotation_enabled: false
screen_reader_frequency: 30
scrypt_cost: 10000$8$1$
second_mfa_reminder_account_age_in_days: 30
second_mfa_reminder_sign_in_count: 10
Expand Down
1 change: 1 addition & 0 deletions lib/identity_config.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -404,6 +404,7 @@ def self.store
config.add(:s3_reports_enabled, type: :boolean)
config.add(:saml_endpoint_configs, type: :json, options: { symbolize_names: true })
config.add(:saml_secret_rotation_enabled, type: :boolean)
config.add(:screen_reader_frequency, type: :integer)
config.add(:scrypt_cost, type: :string)
config.add(:second_mfa_reminder_account_age_in_days, type: :integer)
config.add(:second_mfa_reminder_sign_in_count, type: :integer)
Expand Down
11 changes: 11 additions & 0 deletions spec/components/countdown_alert_component_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,17 @@
end
end

context 'with screen_reader_frequency' do
it 'renders the class' do
rendered = render_inline CountdownAlertComponent.new(
screen_reader_frequency: 30.seconds,
countdown_options: { expiration: },
)

expect(rendered).to have_css('lg-countdown-alert[screen-reader-frequency=30000]')
end
end

context 'with tag options' do
it 'renders with attributes' do
rendered = render_inline CountdownAlertComponent.new(
Expand Down