VoiceOver reads span content inside heading elements separately

**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

```HTML
<!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:
<h1>Heading with span text<span>?</span></h1>

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"

https://user-images.githubusercontent.com/28779939/196146561-eacc6a97-e31f-4302-a798-683bca49ec9c.mov

Navigation Menu

Uh oh!

VoiceOver reads span content inside heading elements separately #75

Overview

Reduced test case

Expected result

Heading with span text?

Actual result

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Uh oh!

VoiceOver reads span content inside heading elements separately #75

Description

Overview

Reduced test case

Expected result

Heading with span text?

Actual result

Activity

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions