Add screen reader instructrions for continuing session

When inactive the modal that asks the user to continue their session now
includes a screen ready only instruction to reduce confusion

Author: jasalisbury

.circleci/config.yml

@@ -109,7 +109,7 @@ parameters:
     default: "main"
     type: string
   sandbox_git_branch:  # change to feature branch to test deployment
-    default: "js-79-logout-on-inactive"
+    default: "js-79-pr-feedback"
     type: string
 jobs:
   build:

frontend/.env

@@ -1,3 +1,3 @@
 BACKEND_PROXY=http://localhost:8080
-REACT_APP_INACTIVE_MODAL_TIMEOUT=60000
-REACT_APP_SESSION_TIMEOUT=120000
+REACT_APP_INACTIVE_MODAL_TIMEOUT=1500000
+REACT_APP_SESSION_TIMEOUT=1800000

frontend/README.md

@@ -18,6 +18,13 @@ There are yarn commands for starting/testing/linting the frontend defined a dire
 | `yarn lint` | Run the linter |
 | `yarn lint:ci` | Run the linter outputting results to xml files |
 
+## Build Environment Variables
+
+| Variable | Description |
+|-|-|
+| `REACT_APP_INACTIVE_MODAL_TIMEOUT` | Amount of time before the "Idle Logout" modal is shown to a user, in milliseconds |
+| `REACT_APP_SESSION_TIMEOUT` | Amount of time before an inactive user is automatically logged out |
+
 ## Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

frontend/src/components/IdleModal.js

@@ -56,6 +56,9 @@ function IdleModal({ modalTimeout, logoutTimeout, logoutUser }) {
         { timeToLogoutMsg }
         {' '}
         unless you become active again.
+        <span className="usa-sr-only">
+          Press any key to continue your session
+        </span>
       </Alert>
     </Modal>
   ));