HTML block: CodeMirror accessibility (and JS TypeErrors) #6680
Labels
[Focus] Accessibility (a11y)
Changes that impact accessibility and need corresponding review (e.g. markup changes).
[Type] Bug
An existing feature does not function as intended
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
witharia-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
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 witharia-label
(with a meaningful text) if there's no visible text to referencearia-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:After pressing Escape and tabbing away from the HTML block with Tab or Shift+Tab, I get these errors:
See
src/wp-admin/js/code-editor.js
The text was updated successfully, but these errors were encountered: