Adopt Edit Context

[hediet]

Follow up of #204371 (exploration done in #207699).

This issue is about:

• When available, use EditContext to react on user input
• Use existing text area or new div elements to render content for screen-reader users

Advantages:

• Very likely fixes many IME bugs
• Simplifies IME handling in code

Disadvantages:

• EditContext is not available on all platforms, in particular not on electron by default
• EditContext does not improve accessibility directly (indirectly, by allowing to use divs to render the screen reader content)
  • text area code is complicated and needs to be adjusted for screenreader support

[alexdima]

@aiday-mar Breaking things down (from our planning discussion):

• Accessibility
  • Get NVDA set up and working well (Caps-Lock and Insert don't work out-of-the-box with Parallels)
  • Learn about how to operate NVDA
    • browse vs focus mode
    • system caret vs review cursor
    • jump to previous / next paragraph without moving the system caret
  • Understand the current pagination based text strategy
  • Propose a new implementation
  • Implement using <div> text content and browser selection
• IME
  • Try out IME scenarios from https://github.com/microsoft/vscode/wiki/IME-Test
  • Fix up the wiki page if it is out of date or incomplete
• Try to see what others such as Outlook Web or Word Online do

[aiday-mar]

Focus vs Browse mode:

• Browse mode. Complex read-only documents are browsed using browse mode. This includes documents such as Mozilla Firefox documents, IE documents, Google chrome, edge. In browse document, the content of the document is made available in a flat representation that can be navigated using the cursor keys. For quicker navigation, NVDA provides single character keys to jump to certain fields. For example h for next heading, p for next text paragraph etc
  • NVDA tries its best to identify text paragraphs, but the algorithm is not perfect and makes mistakes at times. Additionally, this command is different from paragraphs navigation commands. Text paragraph navigation only jumps between text paragraphs, while paragraph navigation commands takes the cursor to the previous/next paragraphs regardless of whether they contain text or not.
  • By default when selecting text with the shift+arrow keys in browse mode, a selection is only made within NVDA’s browse mode representation of the document, and not within the application itself. This means the selection is not visible on the screen, and copying text will only copy NVDA’s plain text representation of the content. There is however a native selection mode which causes the document’s native selection to follow the browse selection.
• Focus mode. Almost all keys are passed to the control. When in browse mode, NVDA will automatically switch to focus mode if you tab to or click on a particular control that requires it.

There are 4 ways to navigate a page with NVDA:

• Navigate with the system focus. The system focus is the object which receives keys typed on the keyboard. The most common way of navigating around Windows with NVDA is to move the system focus using Windows keyboard commands like tab and shift+tab.
• Navigate with the system caret. When an object that allows navigation and/or editing of text is focused, you can move through the text using the system caret, or the edit cursor. NVDA allows one to read parts of such a control (for example line by line) and to report the caret location.
• Navigate through the objects. Object navigation allows you to move between different objects without moving the system focus or the system caret. An object is a single item such as a piece of text, button, checkbox, slider etc. The objects are disposed in a hierarchical view. Once you navigate on an object, you can review its content using the text review commands while in object review mode. By default, the navigator object moves along with the system focus. There are commands to move the navigator object focus to the system focus, or do the opposite.
• Navigate with the mouse. NVDA by default reports the text that is directly under the mouse pointer. It can also be configured to announce the type of the object under the mouse.

Reviewing:

• To review text either you can use the system caret or the review caret.
  • System caret. When focus reaches an object being able to hold a system caret, it allows us to move through the text with the keyboard arrows.
  • Review caret. The review cursor allows us to review text not requiring the system caret to be on the object in order to keep the editing position. It can also be used when generally there is no system caret. By default when the system caret moves, the review cursor follows along. NVDA allows to read the contents of the screen, current document or current object by character, word or line. You can decide to review the following:
    • current navigator object. Review the navigator object. For objects such as editable text fields, this will generally be the text content. For other objects, this may be the name or the value.
    • current document. This allows to review the text of the entire document. When moving around the document with review commands, the navigator object is automatically updated to the object found at the current review cursor position. This applies also to the screen review.
    • screen. Review text on the screen.

Some clarifying questions:

• What is the difference between browse mode and object navigation?
  • Browse Mode
    • Document-Centric: Browse Mode is primarily used for web browsing. It treats web content like a document, making it easier for users with visual impairments to navigate web pages.
    • HTML Document Structure: In Browse Mode, NVDA interprets and presents web content in a structured way, similar to how a sighted user would experience a webpage. It identifies elements such as headings, links, lists, and form fields.
    • Linear Reading: Users can navigate through web content linearly, moving from one element to the next, such as links or headings, using keyboard commands like arrow keys, "H" for headings, and "K" for links.
    • Interactivity: Browse Mode allows users to interact with and activate web page elements like links and buttons by selecting them while in the mode.
  • Object Navigation
    • Element-Centric: Object Navigation is a more granular and fine-grained approach to navigating content. It is not limited to web browsing and can be used to navigate various application interfaces.
    • Objects and Elements: In Object Navigation, NVDA focuses on individual elements and objects within the content, such as buttons, checkboxes, text fields, and other interface elements, not just text and links.
    • Precise Navigation: Users can move through elements one at a time and interact with specific interface components in detail, making it useful for applications, dialog boxes, and software interfaces.
    • Detailed Information: Object Navigation provides detailed information about the currently focused element, including its role, state, name, and additional properties.

Some useful things learned from the user guide:

• It is possible to learn and practise the location of the keys using NVDA+1. In this mode, pressing any input gesture will report the action and describe what it does.
• There are different speech modes (talk), on-demand, off, beeps which control what information NVDA communicates through speech
• You can turn on visual highlighting in order to have boxes representing the location of the system focus, the navigator object and browse mode caret.
  • Solid blue highlights a combined navigator object and system focus location (eg. Because the navigator object follows the system focus)
  • Dash blue highlights just the system focus object
  • Solid ink highlights just the navigator object
  • Solid yellow highlights the virtual caret used in the browse mode (where there is no physical caret such as in web browsers)

[aiday-mar]

PR which is used to understand the TextHandler code #224931, and more specifically the pagination strategy

[Tyriar]

@meganrogge FYI using this new API in xterm.js might be helpful for accessibility.