HTML block: CodeMirror accessibility (and JS TypeErrors)

[afercia]

The CodeMirror implementation for the HTML block should match as much as possible what was done in core for other CodeMirror instances, with regards to accessibility.

ARIA roles, properties and labelling:

The CodeMirror contenteditable area needs to be exposed as a role textbox with aria-multiline="true", which is equivalent to a textarea element.

The contenteditable area needs to be properly labelled.

Since the Tab key is used to insert a tab character, users need to be informed that to exit the CodeMirror area they have to press the Escape key first.

For example, this is what core does for the theme editor, using jQuery. See https://core.trac.wordpress.org/changeset/41586

// Improve the editor accessibility.
$( editor.codemirror.display.lineDiv )
	.attr({
		role: 'textbox',
		'aria-multiline': 'true',
		'aria-labelledby': 'theme-plugin-editor-label',
		'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4'
	});

The same attributes should be used in the Gutenberg implementation. These attributes need to be set on the contenteditable area returned by editor.codemirror.display.lineDiv. Please note:

• aria-labelledby can be replaced with aria-label (with a meaningful text) if there's no visible text to reference
• aria-describedby is used to point to the text in the Help tab; in Gutenberg, it should point to another element providing the same description. The element can be visually hidden. Something along these lines:

When using a keyboard to navigate:
In the editing area, the Tab key enters a tab character.
To move away from this area, press the Esc key followed by the Tab key.
Screen reader users: when in forms mode, you may need to press the Esc key twice.

After pressing Escape and tabbing away from the HTML block with Tab or Shift+Tab, I get these errors:

• Uncaught TypeError: settings.onTabPrevious is not a function
• Uncaught TypeError: settings.onTabNext is not a function

See src/wp-admin/js/code-editor.js

[afercia]

@designsimply not sure why there's the need for the Needs Testing label. These issues were already discussed during implementation of CodeMirror in core and they should be addressed in an equivalent way.

I'd say this should be milestoned for 5.0, as releasing it in its current state won't even have feature parity with the implementation of CodeMirror in core. @mtias any objections?

[designsimply]

I will sometimes add the Needs Testing label if some time has passed after an issue has been opened and there hasn't been any additional activity. Hopefully it will help cut back on stale issues overall, especially as we grow our testing team. 🙂

[youknowriad]

Core Mirror is removed from Gutenberg for now (see #10423) I'd close this issue for now and make sure we check the accessibility guidelines when we bring it back.