Add space before all vh context set when ‘target: _blank’ set (DAC usability issue)

[jrbarnes9]

DAC: Add space before all vh context set when ‘target: _blank’ set

And update default text to ‘(opens in a new tab)’ to be consistent with other uses

Originally posted by @jrbarnes9 in #233 (comment)

Page 49 of EQ RAS DAC report July 2022...

---

Links 1 (usability)
The links were difficult to understand for screen reader users.
WCAG Reference:
Usability
Issue ID: DAC_Links1_Usability
URL: https://eq.surveys.onsdigital.uk/questionnaire/introduction-block/
Page title: Introduction - Quarterly Business Survey
Journey: Task 1 step 1
Screenshot:

Five links situated within the footer were present whereby the hypertext appeared to be adjoined and did not pronounce correctly for screen reader users.. This made it really difficult to understand the purpose of the link.
Current code ref(s): body > div > footer > div.ons-footer__body.ons-page__footer > div > div:nth-child(1) > div:nth-child(2) > ul > li:nth-child(1) > a

<a href="https://www.ons.gov.uk/aboutus/whatwedo/" class="ons-list__link" target="_blank">What we do<span class="ons-u-vh">this link will open in a new tab</span></a>

Screen reader user comments: “I examined the links on the page using the JAWS Links Dialog Menu, ‘JAWS key+F7’, and observed several where two words in the link text had run together, causing JAWS to pronounce them in an indistinct manner. For example, ‘What we dothis link will open in a new tab’. To make these links easier to interpret for those employing adaptive software, the incorrectly joined words should be separated if possible. The issue is present with JAWS, NVDA. It did not occur with VoiceOver or TalkBack.” Please note: the issue is consistent for the following pages: On …, what was the number of employees for …? - Quarterly Business Survey Journey 1 step 2 https://eq.surveys.onsdigital.uk/questionnaire/block2a49398c-45bb-4a50-883a-3dab2dfb23b5/

Solution:
We recommend implementing a non-breaking space within the visually hidden span.
Example:

<a href="https://www.ons.gov.uk/aboutus/whatwedo/" class="ons-list__link" target="_blank">What we do<span class="ons-u-vh">&nbsp;this link will open in a new tab</span></a>