Exit this page: Add attached keyboard help text

[querkmachine]

Re-introduces having keyboard instructions "Press Shift 3 times" adjacent to the Exit this Page button, as per investigation #3267.

This is done on the hypothesis that having that guidance next to the button is clearer to an end user than having the equivalent instructions on a separate guidance page.

Changes

• Adds help text displayed below the EtP button.
  • This text is injected as part of JavaScript initialisation and does not appear if JavaScript (and thus the keyboard-related functionality) is unavailable.
  • This text remains 'stuck' to the viewport with the button when the user scrolls.
  • The help text is hidden on narrow screens, on the basis that screen real estate is more valuable and the vast majority of users are unlikely to be using a physical keyboard at this size.
• Implements our Frontend-wide localisation library into the EtP component's JavaScript for good measure.

Things to consider

• The wording of the text. Currently this uses visually-hidden text to provide more context for screen readers. The full text being: "press Shift 3 times [to exit the page]"
  • Does it read better as "or press Shift 3 times"?
  • Is there liable to be confusion between pressing a key on a keyboard and 'pressing' something on a screen (aka, clicking)?
• I've styled the word "Shift" differently to try and make it clearer that we mean Shift the key on a keyboard, not some other kind of Shift. This seems to be vaguely common practice, including on GitHub → Shift.
  • I'm not sure if there could be confusion here, as not all keyboards actually show the word "Shift" on the Shift key, using an upwards pointing arrow (⇧) instead, but I was worried this could be confused for the top arrow key.
  • Currently none of the help text, Shift included, is clickable. Should it be?
• Hiding the help text on narrow screens also means that it disappears on high zoom levels. In this case, the point about screen real estate still applies, but the user is much more likely to be using a keyboard.

[owenatgov]

This looks grand. I really like the use of kbd which has surprisingly decent support across browsers. I've added some small comments and have some general opinions:

• I'm personally ok with the instructions not being clickable. In the demo where we had it before it wasn't clickable but that's not necessarily a reason not to say it should be.
• I'm not super happy that we're not showing the instructions on small screens, mostly for the zoom case, but it feels like the correct call. Whilst I don't think it takes up that much space, the likelihood of a user using mobile and having a keyboard is lower (though not impossible) and might insight the worry that you mentioned of folks expecting there to be something to press on the screen itself.
• Your concerns about the wording here may be solved by @calvin-lau-sig7's microcopy work

As usual, it's worth getting others' opinions here, notably a designer and @davidc-gds if he can spare the time.

[owenatgov]

Code looking good. I'd still like for a designer to check this out before we proceed.

[Ciandelle]

I would feel more comfortable with the longer text here. I think that users are likely to think that they can click it before associating it with the keyboard itself. Though I do like the stylisation of shift, I'd want @davidc-gds opinion to make sure that we're comfortable that this would still pass accessibility tests. My only concern would be it being images/words which I know @calvin-lau-sig7 has been looking at too.

Otherwise it looks really great. I think the additional text help it really useful to users. Great work :)

[dav-idc]

There appears to be a layout bug that happens between 641px and 757px on the current preview when the 'press shift' text is attached to the EtP button:

Here's a screenshot of how it looks at 641px, with shift pressed once:

The page title <h1> is pushed down in the layout, and the EtP button starts moving above it. This leads to a large vertical gap of white space above the page title.

[owenatgov]

A general comment that even if we end up putting this work down for now, we should retain this as it's good for getting the final code up to scratch.

[querkmachine]

Consensus has been not to merge for now.