AX: VoiceOver announces <details> with visually-hidden text as two separate <details>

• Component: Accessibility
• Status: NEW ---

[Carly Gerard]

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.

[Radar WebKit Bug Importer]

<rdar://problem/75402384>