VS Code native notebook accessibility improvement

Over the last couple of months, we have been receiving feedbacks about the accessibility of the native notebook support in VS Code. Here are some of the major issues we’ve heard:

• Navigation can be confusing
  • There isn’t any easy/intuitive way to navigate from cell input to output
  • Arrow down jumps to next cell if the cursor is at the last line of the current cell
• Monaco editor inside the notebook is not accessible even in accessible mode (document mode)
• Screenreader
  • No aria label for cells
  • No indication of another cell is being activated/focused
  • No indication of how you can move focus into the editor, move to the container, extra shortcuts to move to cells
  • Outputs are not accessible

We are going to explore the proper approaches to address above issues, the bottom line is we align our experience with Settings Editor which is also a list view with rich list items rendered inside.

Current navigation model

The notebook structure in VS Code is basically a list. So keybindings for list view will work in the notebook editor as well, like arrow up and down move focus between cells.

The major difference between notebook and other list views is notebook cell can contain a nested monaco editor. For example, a code cell consists of a monaco editor for input, an output container for output rendering and also some toolbars. Users can press enter to focus the nested monaco editor, or press escape to move the focus back to the list view (still focused on the cell container). Markdown cell is slightly different but the concepts are almost identical, markdown cells are rendered as HTML preview by default, when users focus on the cell, they can double click, or press enter to turn the cell into editing mode, the HTML preview will be replaced by a nested monaco editor. Once finished editing, users press escape to switch the markdown cell to preview state again.

As described above, there are two focus modes: one is focus on the cell list item, the other is focus on the nested monaco editor. The behavior of arrow keys depend on which focus mode users are on. If the focus is on the cell list item, arrow keys will move focus between cells, just like other list views. While if the focus is on the nested monaco editor in a cell, arrow keys on first line or last line of the cell will jump to the previous/next cell’s nested monaco editor. This design allows users to quickly navigate across cells and edit the cell inputs without pressing enter and escape multiple times.

Improvements collected from discussions

• Do not switch to editing mode on enter when the DOM focus is on a link in a markdown cell preview
• Aria alert cell index 0 to cell 1 (1 based, and omit index)

[zersiax]

@rebornix I think perhaps @NiSc91 might have some more specific feedback on this, but I would argue that the best thing would be to do a combination of both. e.g., make all outputs navigable at all times, and either make their headings indicate what they are outputting, or wrap them in a named region indicating what cell the output is from. @mohammad-suliman does that sound ok to you, as well?

[zersiax]

yep, this is essentially a confirmation of what the person I am helping is running into, as well 😃