fix a11y nested span bug in psammead-bulletin #4600
Conversation
DarioR01
added
a11y
| @@ -279,10 +279,12 @@ exports[`Bulletin should render audio correctly 1`] = ` | |||
| dir="ltr" | |||
| > | |||
| <a | |||
| aria-labelledby="bulletin-https://bbc.co.uk" | |||
There was a problem hiding this comment.
I guess this is just an example? Having a url in an id looks rather strange...
There was a problem hiding this comment.
Yes, I hope there is a better id in Simorgh
|
Looks good thanks @DarioR01 |
| > | ||
| {headlineText} | ||
| </LiveLabel> | ||
| ) : ( | ||
| // eslint-disable-next-line jsx-a11y/aria-role | ||
| <span role="text"> | ||
| <span role="text" id={`bulletin-${ctaLink}`}> |
There was a problem hiding this comment.
URLs contain characters that can't be in IDs sadly - see this issue for more info: bbc/simorgh#9696
One option would be to use regex to clean up the URL - something like const id = ctaLink.replace(/\W/g, '') should remove everything except a-z, A-Z and 0-9
There was a problem hiding this comment.
@DarioR01 I've implemented this in another area https://github.com/bbc/psammead/pull/4602/files#diff-cf9b2acec38beebd665b213ba1986338507662983a46b941657c8bbd6bfaac2dR57-R70, so hopefully it should be straightforward enough here
There was a problem hiding this comment.
Yes, sorry for the late reply to everyone. It seems like I missed this from last week. I will sanitise the link after the a11y swarm 👍. Thank you @amoore108 for the implementation example 😄
Resolves #9561
Fix a11y bug causing talkback needing multiple gesture to read every span inside a parent with role=text (This should only require 1 gesture)
Code changes: