Merge branch 'main' into focus-on-first-item-in-MH-dialog

openstax · Sep 19, 2024 · 4c6fdad · 4c6fdad
2 parents 0d0e3b4 + 729cdd3
commit 4c6fdad
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/src/app/content/components/Page.spec.tsx b/src/app/content/components/Page.spec.tsx
@@ -342,14 +342,14 @@ describe('Page', () => {
               + `data-print-placement="here" `
               + `aria-label="Show/Hide Solution"`
             + `>
-      <summary class="btn-link ui-toggle" title="Show/Hide Solution" data-content="Show/Hide Solution"></summary>
-      <section class="ui-body" role="alert">
+        <summary class="btn-link ui-toggle" title="Show/Hide Solution" data-content="Show/Hide Solution"></summary>
+        <section class="ui-body" role="alert">
               <h4 data-type="title" class="solution-title"><span class="os-text">Solution</span></h4>
               <div class="os-solution-container">
                 <p id="paragraph2">answer answer answer.</p>
               </div>
             </section>
-    </details>
+      </details>
           </section></div>
         `);
       });

diff --git a/src/app/content/components/Page/contentDOMTransformations.ts b/src/app/content/components/Page/contentDOMTransformations.ts
@@ -115,19 +115,22 @@ function wrapSolutions(document: Document, rootEl: HTMLElement, intl: IntlShape)
 
   // Wrap solutions in a details element so "Show/Hide Solutions" work
   rootEl.querySelectorAll('.exercise .solution, [data-type="exercise"] [data-type="solution"]').forEach((el) => {
-    el.setAttribute('aria-label', intl.formatMessage({id: 'i18n:content:solution:toggle-title'}));
-    const contents = el.innerHTML;
-    const detailsEl = document.createElement('details');
-
-    Array.from(el.attributes).forEach((attr) => {
-      detailsEl.setAttribute(attr.name, attr.value);
-    });
-
-    detailsEl.innerHTML = `
-      <summary class="btn-link ui-toggle" title="${title}" data-content="${title}"></summary>
-      <section class="ui-body" role="alert">${contents}</section>
-    `;
-    el.replaceWith(detailsEl);
+    // this markup will already be baked into content in some cases
+    if (el.tagName.toLowerCase() !== 'details') {
+      el.setAttribute('aria-label', intl.formatMessage({id: 'i18n:content:solution:toggle-title'}));
+      const contents = el.innerHTML;
+      const detailsEl = document.createElement('details');
+
+      Array.from(el.attributes).forEach((attr) => {
+        detailsEl.setAttribute(attr.name, attr.value);
+      });
+
+      detailsEl.innerHTML = `
+        <summary class="btn-link ui-toggle" title="${title}" data-content="${title}"></summary>
+        <section class="ui-body" role="alert">${contents}</section>
+      `;
+      el.replaceWith(detailsEl);
+    }
   });
 }