Investigate adding text to the ghost page in the Exit this Page component

[owenatgov]

What

Build out a version of the Exit this Page component with transition text eg: "loading..." on the "ghost page" feature.

Why

When we originally built the ghost page, we asserted that we wouldn't include text on the page under the assessment that it wasn't necessary when included in the context of the user activating the button, it would be challenging to brand and as it wasn't standard browser behaviour it could clue in observers that the user is looking at something suspicious.

This has since been challenged on the basis that text could give users a clearer message that they are navigating to a new page and could provide a means to avoid the user getting confused if the new page fails to load.

The intent of this spike is to build an in situ version with text on the ghost page to assess more clearly if this is valuable or not.

Part of alphagov/govuk-design-system#1755

Assumptions

• This is standard practice based on its use in Google docs products when clicking a link in a document that goes to a different domain

Timebox

1 working week (5 days) from start

Who is working on this?

@owenatgov @querkmachine @davidc-gds @Ciandelle @calvin-lau-sig7

Spike lead:
@owenatgov

Questions to answer

• Does unbranded text put users at risk?
• Does the text make the button activation journey clearer for users?

Done when

• Questions have been answered or we have a clearer idea of how to get to our goal
• Findings have been reviewed and agreed with at least one other person
• Findings have been shared, e.g: via a write-up on the ticket, at a show & tell or team meeting

[owenatgov]

Summary of findings from the spike

• We'll be referring to this feature as the "loading overlay" instead of the "ghost page" as this has created confusion about what the feature actually is
• We don't feel that the text creates risk for folks on the basis that it's unbranded and unassuming
• The text is a sensible place from which to announce a version of the status message that the button has been activated to screen readers
• We've decided to use "Loading" as opposed to "Exiting page" for the activation announcement on the grounds that it'll disassociate navigation with the button and lines up with the user navigating to a new page
• We ran into a potential bug that users could interact with the content under the overlay between activating the button and navigating to a new page which we fixed via an extra class we're adding to the body to hide everything as well as use the overlay, which can act as a failsafe in case teams include anything that could conflict with the body class