Bug 223157

In Safari on iOS 14.4 in VoiceOver, a <details> element with a nested visually-hidden <span> will announce as two separate <details> elements. The same pattern happens in iOS Firefox and Chrome as well. To test: Use a test page with the following HTML: <details> <summary>Visible text <span class="visually-hidden" role="presentation">with supplemental but visually-hidden text</span> </summary> // details content </details> Visually-hidden CSS if needed: position:absolute; overflow:hidden; clip:rect(1px,1px,1px,1px); // support for IE -webkit-clip-path:inset(50%); clip-path:inset(50%); width:1px; height:1px; word-wrap:normal; white-space:nowrap; Expected announcement by iOS VoiceOver: "Visible text with supplemental but visually-hidden text, collapsed" How it actually announces: "Visible text, collapsed. [swipe right] With supplemental but visually-hidden text, collapsed." Scott O'Hara mentions that with interactive elements, adding role="presentation" to an inner <span class="visually-hidden"> should prevent the multiple cursor/tab stops, under the "Note about using .sr-only within interactive elements" disclosure: https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html. Marking up the inner <span> this way announces the <summary> as expected with macOS VoiceOver on Safari/Chrome, but not yet in iOS VoiceOver. Adding role="presentation" to the inner .visually-hidden <span> also announces <summary> as expected in NVDA with Firefox and Chrome.