Highlighted characters read as separate word

[iowillhoit]

"Screen reader reads the highlighted characters as a separate word. I don't think we need to do anything right now but it's something to be aware of moving forward. I'll try to do some research and find what the "standard" solution is for highlighted search terms."
--@donnieberg

[tweettypography]

I know we're using the same tag that's used elsewhere in core - so it feels like there must be some workaround

[donnieberg]

I'm not 100% sure if this is a bug. But as a screen reader user, if the word is "paddy's pub" where the "ad" is highlighted, then it reads "p" "ad" "dy's pub" which seems like it'd be confusing. I'll do some research on what the standard solution is and try to get input from the SLDS team as well.

[donnieberg]

Actually, I think it's a bug. I checked the static component on SLDS, and the screen reader just reads out the entire text (ignores what's highlighted/not highlighted). I think we should follow that pattern here.
https://latest-206.lightningdesignsystem.com/components/app-launcher/#flavor-search

[tweettypography]

@donnieberg Just double-checked and that example does seem to have the same issue, it's just masked by the fact that the whole word is highlighted currently, rather than a few characters within the word. They use the same markup for highlighting. We probably need to open a bug with the design team.

[interactivellama]

@arodenbeck Can you look into this? The issue is that if there is a highlight (like in a tree or app launcher), then the screen reader breaks up if there's a span highlighting a partial word.

There may not be an alternative.

[arodenbeck]

@interactivellama I'll check it out. Some initial thoughts, without having looked at the component yet, certain things will break up a word in this way, so as to indicate there is a difference. Capitalization is something that can cause this. Generally highlighting is not indicated, but there are verbosity settings that will allow the screen reader to announce this.