Pending

User tests: Successful: Unsuccessful:

avatar bcordis
bcordis
24 Sep 2026

Pull Request resolves #48153.

  • I read the Generative AI policy and my contribution is either not created with the help of AI or is compatible with the policy and GNU/GPL 2 or later.

This PR was drafted with AI assistance (Claude). I reviewed, tested (see below), and am accountable for the change per the Generative AI policy.

Summary of Changes

plg_editors_codemirror replaces the field's <textarea> with a CodeMirror 6 contenteditable (role="textbox"), but never gives that element an accessible name. The original <label for="..."> still points at the now-hidden textarea, so screen reader users land in the editor with no indication of which field they're editing (axe-core: aria-input-field-name, WCAG 4.1.2, serious).

createFromTextarea() in build/media_source/plg_editors_codemirror/js/codemirror.es6.js now looks up the textarea's associated <label> and passes it through via CodeMirror's EditorView.contentAttributes facet:

  • aria-labelledby when the label has an id (Joomla's joomla.form.renderlabel layout always gives the label an id of <fieldid>-lbl, so this is the path taken by core forms).
  • aria-label (from the label's text) as a fallback when the label has no id.
  • No attribute added when there is no associated label, to avoid emitting an empty aria-label.

Only the ES6 source is touched; media/plg_editors_codemirror/js/* is build output (gitignored) regenerated by the release build.

Testing Instructions

  1. Open any form with a field using editor="codemirror" (or set CodeMirror as the default editor), e.g. Extensions → Templates → Templates → (edit a template file).
  2. Inspect the rendered .cm-content element and confirm it now carries aria-labelledby="<fieldid>-lbl" (or aria-label when no core label id is present).
  3. Run an accessibility scan (e.g. axe DevTools) against the page and confirm the aria-input-field-name violation on .cm-content is gone.
  4. With a screen reader, focus the editor and confirm it announces the field's label instead of just "edit text".

Actual result BEFORE applying this Pull Request

The CodeMirror editing surface has no accessible name; axe-core flags aria-input-field-name (serious, WCAG 4.1.2). Screen reader users hear "edit text" with no indication of which field they are in. Debug overlay shows no aria-labelledby/aria-label and a null computed accessible name:

Before: CodeMirror .cm-content has role=textbox with no aria-labelledby/aria-label and no computed accessible name

Expected result AFTER applying this Pull Request

The CodeMirror editing surface exposes the field's label as its accessible name via aria-labelledby/aria-label, matching what the <label for> on the plain <textarea> it replaces already provided. Debug overlay shows aria-labelledby="jform_articletext-lbl" resolving to the computed accessible name "Article Text":

After: CodeMirror .cm-content has aria-labelledby pointing at the field's label, with computed accessible name Article Text

Link to documentations

Please select:

  • Documentation link for guide.joomla.org:

  • No documentation changes for guide.joomla.org needed

  • Pull Request link for manual.joomla.org:

  • No documentation changes for manual.joomla.org needed

🤖 Generated with Claude Code

avatar bcordis bcordis - open - 24 Sep 2026
avatar bcordis bcordis - change - 24 Sep 2026
Status New ⇒ Pending
avatar joomla-cms-bot joomla-cms-bot - change - 24 Sep 2026
Category ⇒ JavaScript Repository NPM Change
avatar bcordis bcordis - change - 24 Sep 2026
Title
…
[AI] [a11y] Give the CodeMirror editor content an accessible name
[5.4] [AI] Give the CodeMirror editor content an accessible name
avatar bcordis bcordis - edited - 24 Sep 2026
avatar bcordis bcordis - change - 24 Sep 2026
The description was changed
avatar bcordis bcordis - edited - 24 Sep 2026

Add a Comment

Login with GitHub to post a comment