Test rich HTML screen reader content

[aiday-mar]

This issue is about testing the rich HTML screen reader content which was recently introduced. We would like to perhaps turn this on at some point, but before doing this we would like to extensively test this feature, hence this issue. To understand this feature I would like to first give some context on the screen reader mode and how it is implemented.

To be able to read content in VS Code with a screen reader, we render the content under your cursor as well as some text around it, in a hidden HTML element, which is focused when the editor is focused. When you move the cursor in the editor, this repositions the cursor in the hidden element behind too, and this content is read by the screen reader. There are currently two ways to render the screen reader content:

• The legacy system uses a hidden text-area:
  <text-area>content</text-area>
• The new system using the EditContext API renders the content in a hidden DIV element by simply setting the text-content:
  <div>content<div>

This was working all well, until we recently introduced variable fonts in the editor. Now that text in the editor can have variable fonts, we can not simply render the editor text simply as the text content of a hidden div or as the content of a hidden text-area, because they don't allow for variable font-sizes. As such the screen reader box would not be correctly aligned with the editor text position.

To remedy that, we have added a new setting editor.renderRichScreenReaderContent which in combination with the EditContext hidden div implementation, renders the screen reader content the same as in the editor, ie: in a rich manner. In other words, with this setting, the hidden div now renders the editor lines as follows:

<div>
<div line-number=1><span>some</span><span> content</span></div>
<div line-number=2><span>some</span><span> content</span></div>
...
<div>

This rendering makes it so that we can render screen reader content with variable fonts like in the editor, and have the screen reader cursor be correctly aligned with the editor cursor.

This item is about testing this new rich screen reader content rendering, and verifying you are able to use the screen reader correctly with this alternative presentation. To test please do the following:

1. Enable the screen reader accessibility mode with editor.action.toggleScreenReaderAccessibilityMode
2. Enable editor.editContext
3. Enable editor.renderRichScreenReaderContent
4. Interact with the editor and verify the screen reader reads content correctly/as expected

All feedback is welcome! Thank you!

[meganrogge]

@jooyoungseo and @rperez030 it would be great if you could test it out given your expertise!

[accesswatch]

@meganrogge I will also test this once this item gets committed to the Insider branch. #262285

[rperez030]

@jooyoungseo and @rperez030 it would be great if you could test it out given your expertise!

Sure! I already termed it on and initial testing feels promising. i'll test with the different SR in the coming days and report my findings here.

[rperez030]

More careful testing has started to reveal some issues. Both NVDA and JAWS on Windows do not refresh changes in the editor’s content unless a new line is added or removed.

Steps to Reproduce:

1. In a new document, type “this is a test.”
2. Read the active line with the corresponding screen reader command, for example, JAWS + Up Arrow.

Expected Result:
The screen reader should read “this is a test.”

Current Behavior:
The screen reader only reads a blank line.

It is necessary to press Enter and add a new line for the screen reader to update. The same occurs when making changes within an existing line (for example, removing some characters). In these cases, the screen reader continues to read the outdated content until a line is added or removed.

[accesswatch]

@rperez030 This may be due to the Editor.EditContext issue that I believe is now fixed but not yet in Insider builds.

[accesswatch]

It looks like the fixes have not been deployed in Insiders quite yet but I will keep checking.

[aiday-mar]

Hi you must be talking about the PR #262285. It is already merged and should be in insiders.