standards-support
standards-support copied to clipboard
FreedomScientific
JAWS repeats labels in web components
Summary
When using web components, if a button has a tooltip and points to the tooltip with aria-describedby and both the aria-label of the button and the aria-label of the tooltip match, JAWS repeat the content. For example, "Refresh button. To activate, press Enter. Refresh".
This appears not to happen when using native elements, but wrapping them in a shadowRoot causes this to happen.
Expected result
JAWS should not read the repeated content of the tooltip when it matches the button. It should just read, "Refresh button". This is the behavior in NVDA & VO.
Actual result
JAWS reads, "Refresh button. To activate, press Enter. Refresh".
Example
Example button can be found here: https://codepen.io/nonmetalhail/full/NWyLGMz.
Additional Information
none
JAWS version and build number
2020.2110.3
Operating System and version
Windows 10 Pro
Browser and version:
Chrome 98+
I haven't actually went through this workflow since I don't have JAWS on my home computer, but this feels like an expected readout, no?
The first reading of "Refresh" comes from the fact that the aria-label of the button is "Refresh".
The second reading of "Refresh" comes from the fact that aria-describedby is pointing to an element that has an aria-label of "Refresh".
This means that the button has both a label of "Refresh", and a description of "Refresh".
The label and description of an element are considered distinct, so screen readers will usually read both of those things if configured to do so.
@sivakusayan If label and description are identical, the screen reader normally outputs only the label. This does not seem to work here and that is why this was reported as an bug
It is also inconsistent because when you have a button and tooltip that are not contained in shadow DOMs, the readout is deduped. But in this case when it is in a shadow DOM, it is not. The two scenarios should behave the same and ideally, only the label read :)