Update usage notes for Visually Hidden Text

[sareh]

Is your feature request related to a problem? Please describe.
Currently, when Visually Hidden Text component is passed several child strings, React renders them as separate strings, often separated by empty html comments. E.g.

<span class=""VisuallyHiddenText>Video<!-- -->, </span>

When using Assistive Tech this often means several 'swipes' to read each of these strings.

We should update usage notes and Accessibility notes in the README of this component to reflect how it should be used.

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered

• Update Readme for Visually Hidden Text
• Identify all uses of this component in Psammead and open another PR to change usage in all those components.

Eg.

<VisuallyHiddenText>
  {liveText}
  {mediaTypeText}
</VisuallyHiddenText>

should become:

const offscreenText = `${live Text} ${mediaTypeText} `
... 
<VisuallyHiddenText>
  {offscreenText}
</VisuallyHiddenText>

Testing notes
[Tester to complete]

Dev insight: Will there be any potential regression? etc

• This feature is expected to need manual testing.

Additional context
Add any other context or screenshots about the feature request here.