CCM-8308: update modal header every 5 seconds instead of every 1 second for screen readers

Author: bhansell1

frontend/src/__tests__/components/molecules/LogoutWarningModal/LogoutWarningModal.test.tsx

@@ -127,12 +127,12 @@ describe('LogoutWarningModal', () => {
 
     const events = [
       {
-        timeRemaining: 29,
-        advanceTimersBySeconds: 31,
+        timeRemaining: 25,
+        advanceTimersBySeconds: 35,
       },
       {
         timeRemaining: 20,
-        advanceTimersBySeconds: 9,
+        advanceTimersBySeconds: 5,
       },
       {
         timeRemaining: 10,
@@ -142,10 +142,6 @@ describe('LogoutWarningModal', () => {
         timeRemaining: 5,
         advanceTimersBySeconds: 5,
       },
-      {
-        timeRemaining: 1,
-        advanceTimersBySeconds: 4,
-      },
     ];
 
     for (const { timeRemaining, advanceTimersBySeconds } of events) {
@@ -215,12 +211,12 @@ describe('LogoutWarningModal', () => {
 
     act(() => {
       // advance timers by 32 seconds
-      jest.advanceTimersByTime(32_000);
+      jest.advanceTimersByTime(35_000);
       fireEvent.focus(document);
     });
 
     expect(getByTestId('modal-header').innerHTML).toEqual(
-      `For security reasons, you'll be signed out in 28 seconds.`
+      `For security reasons, you'll be signed out in 25 seconds.`
     );
 
     const clicked = fireEvent.click(getByTestId('modal-sign-in'));

frontend/src/components/layouts/client/client-layout.tsx

@@ -14,9 +14,9 @@ Amplify.configure(amplifyConfig, { ssr: true });
 
 const config = {
   logoutInSeconds:
-    Number(process.env.NEXT_PUBLIC_TIME_TILL_LOGOUT_SECONDS) || 30, // 15 minutes force logout
+    Number(process.env.NEXT_PUBLIC_TIME_TILL_LOGOUT_SECONDS) || 900, // 15 minutes force logout
   promptTimeSeconds:
-    Number(process.env.NEXT_PUBLIC_PROMPT_SECONDS_BEFORE_LOGOUT) || 20, // 2 minutes before logout
+    Number(process.env.NEXT_PUBLIC_PROMPT_SECONDS_BEFORE_LOGOUT) || 120, // 2 minutes before logout
 };
 
 export function ClientLayout({ children }: { children: React.ReactNode }) {

frontend/src/components/molecules/LogoutWarningModal/LogoutWarningModal.tsx

@@ -12,6 +12,10 @@ import { formatTime } from './format-time';
 
 import styles from './LogoutWarningModal.module.scss';
 
+// Note: This is 5 seconds because it gives a screen reader a chance to read out the full modal title.
+// Whereas with 1 second a screen reader doesn't get a chance to read out the whole modal and is jarring.
+const HEADING_UPDATE_INTERVAL = 5000;
+
 export const LogoutWarningModal = ({
   promptBeforeLogoutSeconds,
   logoutInSeconds,
@@ -64,7 +68,7 @@ export const LogoutWarningModal = ({
       const remaining = Math.ceil(getRemainingTime() / 1000);
 
       setRemainingTime(formatTime(remaining));
-    }, 1000);
+    }, HEADING_UPDATE_INTERVAL);
 
     return () => {
       if (intervalRef.current) {

tests/test-team/template-mgmt-component-tests/template-mgmt-choose-page.component.spec.ts

@@ -58,7 +58,7 @@ test.describe('Choose Template Type Page', () => {
   }) => {
     const chooseTemplatePage = new TemplateMgmtChoosePage(page);
 
-    await chooseTemplatePage.loadPage('');
+    await chooseTemplatePage.loadPage();
     await chooseTemplatePage.clickContinueButton();
 
     await expect(page).toHaveURL(`${baseURL}/templates/choose-a-template-type`);

tests/test-team/template-mgmt-component-tests/template-mgmt-logout-warning.component.modal.spec.ts

@@ -36,7 +36,7 @@ test.describe('Logout warning', () => {
 
     await dialog.getByRole('button', { name: 'Stay signed in' }).click();
 
-    await expect(dialog).not.toBeVisible();
+    await expect(dialog).toBeHidden();
   });
 
   test('logout warning should pop up and close after user clicks "Sign out"', async ({
@@ -54,7 +54,7 @@ test.describe('Logout warning', () => {
 
     await dialog.getByRole('link', { name: 'Sign out' }).click();
 
-    await expect(dialog).not.toBeVisible();
+    await expect(dialog).toBeHidden();
   });
 
   test('logout warning should force logout after timeout', async ({ page }) => {