VoiceOver reads span content inside heading elements separately #75
Description
Upstream bug: Submitted via Feedback - FB11694557
Date: 2022-10-17
Reported by: Martin Jones
Related to: NA
Overview
Create a new HTML document using the HTML below. Then use the VO (control+option) + A shortcut to instruct VoiceOver to read out the content in any of the 3 browsers below:
- Chrome Version 106.0.5249.119 (Official Build) (arm64)
- Safari Version 16.0 (17614.1.25.9.10, 17614)
- Firefox 105.0.3 (64-bit)
Issue is not present in NVDA and JAWS.
The same issue occurs when using the Rotor (control+option) + U to navigate by headings.
Reduced test case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
border: 0 !important;
white-space: nowrap !important;
}
</style>
<main>
<h1>Heading no span text</h1>
<h1>Heading no span text?</h1>
<h1>Heading with span text<span>?</span></h1>
<h1>Heading with hidden span text<span class="visually-hidden">?</span></h1>
</main>
</body>
</html>Expected result
Given the HTML below:
Heading with span text?
VoiceOver should read the heading text as "Heading with span text?"
Actual result
VoiceOver reads out "Heading level 1, 2 items Heading with span text question mark"