JS error when embedded media and accordion are used together if “Collapse all tabs by default” is disabled

Problem/Motivation

JavaScript error occurs when a node body contains both an embedded media entity and a CKEditor accordion, and the module setting “Collapse all tabs by default” is unchecked:
Uncaught TypeError: Cannot read properties of null (reading 'classList')
at Object.attach (accordion.frontend.min.js)

The error happens during node edit, when interacting with the embedded media.

The issue is reproducible on Drupal core 10.6.2 as well as Drupal 11.

Steps to reproduce

• Go to /admin/config/content/ckeditor-accordion
• Make sure “Collapse all tabs by default” checkbox is unchecked
• Create or edit a content type that uses CKEditor
• In the node body:
  • Insert an embedded media entity
  • Insert a CKEditor accordion
• Save the node
• Edit the node again
• Click on the embedded media entity in the editor
• Click on the media edit (pencil) icon

When the media edit dialog opens, a JavaScript error appears in the browser console

Proposed resolution

Current code:

// The first one is the correct one.
if (!drupalSettings.ckeditorAccordion.accordionStyle.collapseAll) {
  $accordion.querySelector('dt:first-child').classList.add('active');
  let dd = $accordion.querySelector('dd:first-of-type');
  dd.classList.add('active');
  dd.style.display = 'block';
}

Proposed fix:

// The first one is the correct one.
if (!drupalSettings.ckeditorAccordion.accordionStyle.collapseAll) {
  const firstDt = $accordion.querySelector('dt:first-child');
  const firstDd = $accordion.querySelector('dd:first-of-type');
  if (firstDt && firstDd) {
    firstDt.classList.add('active');
    firstDd.classList.add('active');
    firstDd.style.display = 'block';
  }
}