vscode
vscode copied to clipboard
microsoft
Exploration: rendering complex HTML screen reader content for different OS and screen reader type
Relevant issue: https://github.com/microsoft/vscode/issues/251619 Relevant PR: https://github.com/microsoft/vscode/pull/249098
Exploration
As part of the work to allow defining variable font sizes and font families in the editor, I have been exploring rendering the screen reader content with a complex HTML structure like in the view lines instead of using simple plain text. As such a line in the hidden screen reader content div would be rendered as follows:
<div>
<span>some text 1</span>
<span>some text 2</span>
<span>some text 3</span>
<div>
instead of
<div>
some text 1
some text 2
some text 3
<div>
When using VoiceOver in VS code, it has been noticed that VoiceOver will read only the text of the sub-span which is focused, not the text for the full line. This issue is meant to track this behavior across different Operating Systems and browsers/platforms.
Consider the following HTML sample:
<html>
<div contenteditable="true">
<div><span>This</span><span> is</span> the first line</div>
<div><span>This</span><span> is the</span> second line</div>
<div><span>This</span><span> is the third</span> line</div>
</div>
</html>
MacOS
Chrome + VoiceOver
Simple example
https://github.com/user-attachments/assets/e7825612-a86b-4f36-954c-744eda0e297c
Filed issue https://issues.chromium.org/issues/418936594
VS Code - chromium - using EditContext
https://github.com/user-attachments/assets/23baa489-5f4c-4b43-84fe-1140c3d01a43
Safari + VoiceOver
Simple example
https://github.com/user-attachments/assets/c2f0fa0a-088f-43d2-affe-341db9e47aeb
VS Code - webkit - using TextArea (no EditContext)
https://github.com/user-attachments/assets/4e6b0f39-13ef-49f5-8e5f-e598f06c9eb3
Edge + VoiceOver
Simple example
https://github.com/user-attachments/assets/080e6298-94ba-4511-ad5c-510d4bb1f528
Windows
Chrome+NVDA
Simple example
https://github.com/user-attachments/assets/95cc6ad5-d864-43d8-befe-ca6d874cf130
VS Code - chromium - using EditContext
https://github.com/user-attachments/assets/f61a6e5a-07b9-4811-99cf-6aea9a6a41a4
Edge+NVDA
Simple example
https://github.com/user-attachments/assets/67de1a75-080d-4995-98e6-3840a210b99d
