P2 a11y bug - episode list - Screenreaders read out part of the date after the duration

[jroebu14]

Describe the bug
Screenreaders read out part of the date after the duration. This is because both the duration and date have a style of display: inline - the screenreader thinks they should be read together but only reads part of it - the day of the month - so it sounds like the duration is much longer. Then when you press down again to read the date it will read the remaining part of the date - October 2020 - and not the day of the month.

To Reproduce
Steps to reproduce the behaviour:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. 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.

[jroebu14]

I spoke with Catharine about this one. Her thoughts are below:

was thinking it might be specific to the way NVDA behaves but I read it again and saw you said it reads out part of the date… if it had read all of it then I would of put it down to NVDA and how that works (such as it will read out all list items in a list, and other screen readers will read one list item at a time)

I can’t remember if NVDA only reads so many characters or words before you have to do another press of the arrow key, could be that

[gavinspence]

Can we close this @greenc05 ? It seems like it's behaviour specific to NVDA.

[greenc05]

NVDA will only read a set number of characters out when you press the down arrow key to navigate. I see when navigating via links (pressing the tab key) and then pressing the down arrow key to move to the time element, the day and the month is not read out - just the year. Looking at this, I think the div wrapping the time element needs display inline-block and the time element needs display block to fix this.