type="editor" editor="codemirror" (or make CodeMirror the default editor) — the field renders a <textarea> with an associated <label for="…">..cm-content, a contenteditable with role="textbox").The editing surface exposes the field's label as its accessible name, the way the plain <textarea> it replaces did through its <label for> association.
The contenteditable has role="textbox" and no accessible name — no aria-label, no aria-labelledby. axe-core reports it as aria-input-field-name (serious, WCAG 4.1.2). A screen reader user landing in the editor hears "edit text" with no indication of which field they are editing. The original textarea's label still exists in the DOM but points at the hidden textarea, not at the editing surface.
build/media_source/plg_editors_codemirror/js/ contains no aria wiring at all (checked on current 6.1-dev).
CodeMirror 6 provides the EditorView.contentAttributes facet for exactly this. When creating the view, resolve the label of the textarea being replaced and pass it through, e.g.:
const label = element.labels?.[0];
// …
extensions.push(EditorView.contentAttributes.of(
label && label.id ? { 'aria-labelledby': label.id } : { 'aria-label': label?.textContent?.trim() ?? '' },
));(Labels rendered by joomla.form.renderfield already carry an id of the form <fieldid>-lbl, so aria-labelledby resolves without generating ids in most core forms.)
6.1-dev; the integration is the same in 5.x and 7.0.@axe-core/playwright) of a third-party component form using editor="codemirror". We currently exclude .cm-editor from our scans as third-party markup, with this report as the paper trail.| Labels |
Added:
No Code Attached Yet
|
||
| Labels |
Added:
a11y
|
||