Simplify the DOM structure within Headings in the radio schedule component

[tochwill]

Describe the bug
We have complicated, nested DOM elements within headings inside the radio schedule programme card.

Heading level 3s are very complex - we should simplify the DOM where possible. Current setup is this:

<h3>
  <span role="text">
    <span>NEXT</span>
    <span class="VisuallyHiddenText">,</span>
    <span> جام جهان نما</span>
    <span class="VisuallyHiddenText">, ۱۵:۰۰, </span>
    <span>25/03/2020 GMT</span>
  </span>
</h3>

An issue in NVDA that may be related:

When navigating via elements, first it reads heading level 3/link + the name of the headline + the start time (whithout the date), but when navigating to the next element, it reads again heading level 3/link + just the date. Should it be all announced at once as when navigating via headings/links?

To Reproduce
Steps to reproduce the behaviour:

1. Go to https://www.test.bbc.com/hausa?renderer_env=live
2. Inspect the radio schedule heading
3. See error

Expected behaviour
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Testing notes

• This bug fix is expected to need manual testing.

Additional context
Add any other context about the problem here.

[greenc05]

This bug is due to CSS... if you disable CSS NVDA reads out the h3/link as expected with one key press

[greenc05]

Also I only observe this bug when navigating via the down/up arrow key, it's fine when navigating via headings and links using 'h' or the 'tab' key

[greenc05]

This bug is due to using display block CSS on span.TitleWrapper-sc-6oo8lp-5 jjATGt if we change display block to display inline-block, this fixes this bug, I believe we will then also need to apply width 100% to the span in question to fix the layout... Though I notice that the hover styling is now only underlining the 1st part of the h3 (the title such as 'Shirin Rana') - how can we address that? Or maybe that's ok?? Can ask UX if we can't fix that....

[greenc05]

There is a related ZoomText bug "When using the TAB key to navigate through the feature, just the headline and start time are announced, not the date." This is also fix by changing the CSS as per above. Zoomtext should be re-tested when this has been implemented along with NVDA and all other AT.

[greenc05]

Before fixing this issue with CSS lets check it's not due to an escaped character in the code similar to the fix for the duration bug #3321