Revert a11y fix for nested span bug in Talkback

[DarioR01]

Is your feature request related to a problem? Please describe.

Information about the Bug: The nested span bug is a Talkback bug that makes the screen-reader read each span inside a parent span with role="text" one by one (with one swipe/gesture for every children span). The expected behaviour of role="text" is that all the children of the element that has role="text" should be read at once (with one swipe/gesture only).

When does this bug occur? The bug occurs when an Anchor element () has more than one nested HTML element with content is inside. For instance the following works fine:

<span>
   <span>children one</span>
   <span>children two</span>
</span>
 
<a href="#">
   <span>span 1</span>
</a>
 
<a href="#">
   <span>
         <span>nested span</span>
   </span>
</a>

But the following would break:

<a href="#">
      <span>span 1</span>
      <span>span 2</span>
</a>
    
<a href="#">
      <div>I am italic</div>
      <div>I am italic</div>
</a>
    
<a href="#">
      <span>
            <span>nested span</span>
            <span>nested span</span>
      </span>
</a>

Solution We discovered that having an aria-labelledby inside the parent Anchor element that refer to an id of the span element that holds the role="text" fixes the issue and makes all the span being read at once (with one swipe/gesture only).

<a href=”#” aria-labelledby="label-fix">
    <span role="text" id="label-fix">
            <span>First span</span>
            <span>Second span</span>
    </span>
</a>

Following the above work: Once TalkBack or Google will fix the bug we would need to revert the changes.

When to do we need to revert? This issue is outside of our control. This is an bug internal to Talkback. We already reported the bug to Talkback and Google.

We should revert once this google/Talkback bug has been resolved: https://bugs.chromium.org/p/chromium/issues/detail?id=1265949

What needs to be reverted?

Simorgh https://github.com/bbc/simorgh/pull/9571 https://github.com/bbc/simorgh/pull/9619 https://github.com/bbc/simorgh/pull/9598 https://github.com/bbc/simorgh/blob/latest/src/app/pages/TopicPage/Pagination/index.jsx

Psammead #4586 #4587 #4588 #4591 #4598 #4599 #4600

Describe the solution you'd like Revert the changes made by the above PRs

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Testing notes [Tester to complete]

Dev insight: Will Cypress tests be required or are unit tests sufficient? Will there be any potential regression? etc

• [ ] This feature is expected to need manual testing.

Checklist

• [x] (BBC contributors only) This issue follows the repository use guidelines

Additional context We also reported the bug with Talkback but we don't have a link to a public open issue.

Further information about the resolution process, a11y swarm, and insight on the solution we applied can be found here

I would suggest to start by reverting only one of the simorgh's PRs and test the revert on the following a11y tools we support:

• [ ] NVDA
• [ ] VoiceOver Mac
• [ ] VoiceOver iOS
• [ ] TalkBack
• [ ] JAWS

If all tools pass this "mini a11y swarm" you can be almost sure that the revert can be performed to all PRs

[joshcoventry]

@DarioR01 What's the latest on this one please?

[DarioR01]

@joshcoventry No updates 🤕. Google is still working on it probably.