Problem/Motivation
On Drupal 11 with Editoria11y 3.0.7, an uncaught JavaScript error is thrown whenever a CKEditor 5 instance mounts on a form where the Editoria11y check runs but the checker panel has not been built yet:
TypeError: s.panel?.querySelector is not a function at os (ed11y.esm.min.js:3694) at Ke (ed11y.esm.min.js:4341)
UI.panel is initialized to false and is only replaced with the panel DOM element once the panel is built (UI.panel = UI.panelElement.shadowRoot.getElementById('ed11y-panel')). Both showAltPanel() and showHeadingsPanel() read the panel via optional chaining:
const altList = UI.panel?.querySelector("#ed11y-alt-list"); const panelOutline = UI.panel?.querySelector("#ed11y-outline");
Optional chaining (?.) only short-circuits on null/undefined, not on false. So when the panel has not been built, false.querySelector is evaluated and throws "querySelector is not a function". Sibling functions such as visualize() already guard correctly with if (!UI.panel) return;.
Steps to reproduce
- On a Drupal 11 site (tested on 11.4.3) with Editoria11y 3.0.7, edit a content type that uses the Paragraphs widget.
- Add a paragraph whose subform contains a CKEditor 5 field.
- As the editor mounts, the browser console throws
TypeError: querySelector is not a functionfromshowAltPanel/showHeadingsPanel(minifiedis/os). It is preceded by the warning "Editoria11y did not find any elements that matched the check area configuration".
The checker otherwise works and content authoring/saving is unaffected, but the uncaught TypeError is logged on every such editor mount.
Proposed resolution
Guard against a non-element UI.panel in the two functions, matching the pattern already used by visualize(). Change:
const altList = UI.panel?.querySelector("#ed11y-alt-list"); const panelOutline = UI.panel?.querySelector("#ed11y-outline");
to:
const altList = UI.panel && UI.panel.querySelector("#ed11y-alt-list"); const panelOutline = UI.panel && UI.panel.querySelector("#ed11y-outline");
The following if (!altList) / if (!panelOutline) guards then handle the falsy result as before. Ideally the fix is applied in the library source so it persists through the build and is reflected in the shipped library/dist/js/ed11y.esm.js and ed11y.esm.min.js. A merge request applying the guard to both shipped bundles is provided.
Issue fork editoria11y-3611241
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
dylan donkersgoed commentedComment #4
itmaybejj commentedComment #6
itmaybejj commentedShipped in 3.0.8. Check in if you want a CSA license for helping test the project.