I've been using the timeout dialog example in the design system for some ad-hoc testing.
Two things would help immensely:
- Don't have it show on page load - instead either after a delay, or on button press
- Show an example of what happens to existing page content
Don't have it show on page load - instead either after a delay, or on button press
The govuk content publishing example has a button that triggers the modal. The advantage here is when testing in something like Voiceover, you're already 'inside' the page and so it better represents how it would happen in real life. With the hmrc one you get it on page load - so the voiceover focus may be on the url bar.
Show an example of what happens to existing page content
I'm not sure it's clear what should happen to existing page content. Is it removed and replaced by the modal? does the modal appear on top? The example adds an overlay div with opacity 0.8 so I assume existing content is meant to stay.
One of the accessibility acceptance criteria be that focus is trapped on the modal and you can't scroll - as there's no other content in the examples, it's hard to test if focus is truly trapped / scrolling is prevented, etc.
I've been using the timeout dialog example in the design system for some ad-hoc testing.
Two things would help immensely:
Don't have it show on page load - instead either after a delay, or on button press
The govuk content publishing example has a button that triggers the modal. The advantage here is when testing in something like Voiceover, you're already 'inside' the page and so it better represents how it would happen in real life. With the hmrc one you get it on page load - so the voiceover focus may be on the url bar.
Show an example of what happens to existing page content
I'm not sure it's clear what should happen to existing page content. Is it removed and replaced by the modal? does the modal appear on top? The example adds an overlay div with opacity
0.8so I assume existing content is meant to stay.One of the accessibility acceptance criteria be that focus is trapped on the modal and you can't scroll - as there's no other content in the examples, it's hard to test if focus is truly trapped / scrolling is prevented, etc.