How can I make VoiceOver combine multiple span elements into one read item?

I have the below HTML where part of the text is colored red. This is to visually draw attention to the text.

<div>
    <span style="color:red">Note: </span>
    <span>Don't forget your appointment.</span>
</div>

When I swipe right through this using VoiceOver it's read as:

swipe note

swipe don't forget your appointment

However, it doesn't make sense to make someone swipe twice to hear this message.

What I want is for this text to be read as a single element by Voiceover, the same as if the HTML was:

<div>
    Note: Don't forget your appointment.
</div>

Other styles, such as bolding a word in the middle of a sentence, also cause this issue.

I figured out one possible solution. The way to fix this is to add the non-standard text role:

<div role="text">
    <span style="color:red">Note: </span>
    <span>Don't forget your appointment.</span>
</div>

This is, apparently, only recognized by iOS. However, I found that Android's TalkBack doesn't have this issue to begin with. It knows to read the line as a single item.

CAREFUL: this will also read across embedded links so they can't be activated.

For certain parent elements, this isn't necessary. For example, if the parent div is a button or has role="button" then it will read the inside as a single line. Same for an href parent.