VoiceOver does not read paragraph text correctly when is includes a span element - Chrome #77
Description
Upstream bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1375099
Date: 2022-10-17
Reported by: Martin Jones
Related to: NA
Overview
Load the HTML page attached and use the VO (control+option) + A shortcut to instruct VoiceOver to read out the content with Chrome Version 106.0.5249.119 (Official Build) (arm64)
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>
<main>
<p>Paragraph text with span content at the end<span>?</span></p>
<p>Paragraph text with span content at the end<span>??</span></p>
<p>Paragraph text with span content at the end<span>???</span></p>
<p><span>...</span>Paragraph text with span content at the beginning</p>
<p><span>....</span>Paragraph text with span content at the beginning</p>
</main>
</body>
</html>Expected result
Each word in the paragraph is read out in full
Actual result
Depending on the placement of the span tag and the number of characters it contains, you will get a different result, the attached video demonstrates this.
It does seem possible to predict the actual result based on the placement of the span tag and the number of characters it contains, for example:
When the span content is at the end, extra characters taken from the start of the paragraph text are added to the end:
<p>Paragraph text with span content at the end<span>?</span></p>
VoiceOver will read out "Paragraph text with content at the end? Pa"
The number of characters in the span element will impact what is read out by VoiceOver.
<p>Paragraph text with span content at the end<span>???</span></p>
VoiceOver will read out "Paragraph text with content at the end??? Para"
When the span content is at the beginning, the sentence is read out twice, but the 2nd sentence has characters missing from the end:
<p><span>...</span>Paragraph text with span content at the beginning</p>
VoiceOver will read out "...Paragraph text with span content at the beginning ...Paragraph text with span content at the beginni"