Skip to content

Commit

Permalink
content and spacing changes
Browse files Browse the repository at this point in the history
  • Loading branch information
StephanieLongden committed Aug 18, 2023
1 parent a19f526 commit ceff269
Showing 1 changed file with 9 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ const Page: FC<PageProps> = ({ location }) => (
<p className="govuk-body">If the user does not take action within the time limit, send them to a timeout page that explains what has happened and gives options for how to continue. </p>
<p className="govuk-body">Investigate the most appropriate session length for your service, based on the needs of users and security requirements. </p>
<p className="govuk-body">You may choose to add a ‘Warning’ prefix to the title of your page once the countdown has started, to alert users who are working on a different tab. </p>
<p className="govuk-body">You may choose to add a ‘Warning’ prefix to the title of your page once the countdown has started, to alert users who are working on a different tab. </p>


<p className="govuk-body"><strong>The timeout warning modal should:</strong></p>
Expand Down Expand Up @@ -91,11 +92,12 @@ const Page: FC<PageProps> = ({ location }) => (

<p className="govuk-body">As an example, the timeout warning could be triggered by 25 minutes of inactivity and show a 5-minute countdown.</p>
<p className="govuk-body">The time should count down in minutes until the last minute, when it should change to 20-second intervals, both on the modal and for screen reader alerts. </p>
<p className="govuk-body">Use <code>Aria live = polite</code> for the countdown message so it will be announced as it is updated. For a screen reader to announce content updates, the content must be inserted into a live region element. </p>
<p className="govuk-body">Use <code>aria-live="polite"</code> for the countdown message so it will be announced as it is updated. For a screen reader to announce content updates, the content must be inserted into a live region element. </p>

<h3 className="govuk-heading-m">When the user is not signed into a service</h3>
<p className="govuk-body">If a user is not signed in, tell them their progress will not be saved if the time runs out. </p>
<p className="govuk-body">If the user is timed out, consider the onwards journey. </p>
<h3 className="govuk-heading-m"></h3>
<div className="app-example">
<h2 className="govuk-heading-l">Your page will time out soon</h2>

Expand All @@ -107,24 +109,23 @@ const Page: FC<PageProps> = ({ location }) => (
Stay on this page
</button>
</div>



<h2 className="govuk-heading-l">Accessibility</h2>
<p className="govuk-body">Give users an appropriate time to react to a timeout - use the <A href="https://design.homeoffice.gov.uk/accessibility/timeouts">accessibility timeouts and time limits guidance.</A> </p>
<p className="govuk-body">Ensure screen readers announce the remaining time - use <code>aria-live =polite</code> so the hidden countdown does not interrupt other content being read out.</p>
<p className="govuk-body">Give users an appropriate time to react to a timeout - use the <A href="https://design.homeoffice.gov.uk/accessibility/timeouts">accessibility timeouts and time limits guidance</A>.</p>
<p className="govuk-body">Ensure screen readers announce the remaining time - use <code>aria-live="polite"</code> so the hidden countdown does not interrupt other content being read out.</p>




<h3 className="govuk-heading-m">When the modal dialog opens:</h3>
<p className="govuk-body"><strong>When the modal dialog opens:</strong></p>
<ul className="govuk-list govuk-list--bullet">
<li>prevent the user from interacting with the underlying page </li>
<li>add an overlay to the underlying page content to show users that they cannot interact with it </li>
<li>consider the keyboard accessibility of interactive elements, <A href="https://design.homeoffice.gov.uk/accessibility/forms/keyboard">more guidance on keyboard accessibility</A></li>

</ul>


<h3 className="govuk-heading-m">For a screen reader:</h3>
<p className="govuk-body"><strong>For a screen reader:</strong></p>
<ul className="govuk-list govuk-list--bullet">
<li>announce that a dialogue has opened</li>
<li>read the modal content, including the calls-to-action</li>
Expand Down

1 comment on commit ceff269

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

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

Please sign in to comment.