Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert a11y fix for nested span bug in Talkback #9652

Open
1 of 7 tasks
DarioR01 opened this issue Nov 8, 2021 · 2 comments
Open
1 of 7 tasks

Revert a11y fix for nested span bug in Talkback #9652

DarioR01 opened this issue Nov 8, 2021 · 2 comments
Labels
a11y Accessibility-related task blocked This issue should not be worked on until another internal issue is completed - see desc for details low-priority Refinement Needed This is ready for refinement. It shouldn't be worked on until it has been refined by Dev & Test. technical-work Technical debt, support work and building new technical tools and features

Comments

@DarioR01
Copy link
Contributor

DarioR01 commented Nov 8, 2021

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
#9571
#9619
#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

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

@DarioR01 DarioR01 added the Refinement Needed This is ready for refinement. It shouldn't be worked on until it has been refined by Dev & Test. label Nov 8, 2021
@DarioR01 DarioR01 changed the title Revert a11y fix for span bug Revert a11y fix for nested span bug in Talkback Nov 8, 2021
@DarioR01 DarioR01 added blocked This issue should not be worked on until another internal issue is completed - see desc for details a11y Accessibility-related task low-priority technical-work Technical debt, support work and building new technical tools and features labels Nov 8, 2021
@joshcoventry
Copy link
Contributor

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

@DarioR01
Copy link
Contributor Author

DarioR01 commented Jan 31, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Accessibility-related task blocked This issue should not be worked on until another internal issue is completed - see desc for details low-priority Refinement Needed This is ready for refinement. It shouldn't be worked on until it has been refined by Dev & Test. technical-work Technical debt, support work and building new technical tools and features
Projects
None yet
Development

No branches or pull requests

2 participants