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

  1. On a Drupal 11 site (tested on 11.4.3) with Editoria11y 3.0.7, edit a content type that uses the Paragraphs widget.
  2. Add a paragraph whose subform contains a CKEditor 5 field.
  3. As the editor mounts, the browser console throws TypeError: querySelector is not a function from showAltPanel/showHeadingsPanel (minified is/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.

Command icon 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

dylan donkersgoed created an issue. See original summary.

dylan donkersgoed’s picture

Status: Active » Needs review
itmaybejj’s picture

Assigned: Unassigned » itmaybejj

  • itmaybejj committed 0d868d9a on 3.0.x-dev
    fix: #3611241 TypeError: querySelector is not a function in showAltPanel...
itmaybejj’s picture

Status: Needs review » Fixed

Shipped in 3.0.8. Check in if you want a CSA license for helping test the project.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.