Accessible timeout warning ·

Timeout warning is a component that:

Is shown after a period of inactivity
Warns users before a session timeout that they’re about to time out
Allows users to extend their session
Offers alternate options if they don’t want to extend
Requests user to take action and tells them how much time they have to do so
Provides information to assistive technology so users with access needs are well supported

User story

As an Assistive Technology (AT) user, I want to be informed that a modal dialog has opened, what its purpose is, and how to action / close it.

The modal dialog must:

Be focusable with a keyboard. (If an element eg. button triggers the dialog, that element must also be keyboard focusable.)
Inform user that an alert dialog has opened
Constrain focus to dialog
Return focus to element that had focus before the dialog was invoked.
Be possible to close. Be clear how to close. Examples of ways to close are pressing Esc and a close button.
Underlying page content must not look actionable.
Prevent user searching in the underlying page.
Prevent scrolling of the underlying page.
Should always be visible - regardless of scrolling, screen size or orientation changes.

Where multiple modals are open, above criteria apply to top-most one.

Screen reader users may not rely on the tab key to interact with the dialogue content.
Screen readers have many keyboard commands for interacting with content and it's important that the way the dialogue is implemented doesn't prevent them from being usable.
Could we use this as the list of commands for testing?

Moves focus to the next focusable element inside the dialog.
If focus is on the last element, moves focus to the first focusable element inside the dialog.

Moves focus to the previous focusable element inside the dialog.
If focus is on the first element, moves focus to the last focusable element inside the dialog.

Run npm install

Run npm start

Include the markup from app/views/includes/modal_dialog.html on your page.
The script looks for a #content div on the page to set the inert attribute. Please change this to match name of your main container in makePageContentInert and removeInertFromPageContent in javascripts/modal-dialog.js. This indicates the active part of the page to screenreaders.
Include sass/patterns/_modal-dialog.scss as part of your SASS.
Include /javascripts/dialog.polyfill.0.4.3.js and javascripts/modal-dialog.js on your page or as part of your JavaScript bundle.
Initialise the JavaScript in javascripts/application.js with GOVUK.modalDialog.init()