diff --git a/src/app/content/components/Page.spec.tsx b/src/app/content/components/Page.spec.tsx
index 787d31b794..213a507521 100644
--- 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"`
+ `>
-
-
`);
});
diff --git a/src/app/content/components/Page/contentDOMTransformations.ts b/src/app/content/components/Page/contentDOMTransformations.ts
index 8f1bf70ee4..6791541c86 100644
--- 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 = `
-
-
- `;
- 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 = `
+
+
+ `;
+ el.replaceWith(detailsEl);
+ }
});
}