feat: add lang code to iframe (freeCodeCamp#47365)

* feat: add lang code to iframe

* feat: apply Naomi's code review

Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com>

* fix: Iframe title test

* Apply suggestions from code review

Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com>

* fix: hopefully things make sense

* fix: steal sem's idea for DOMParser

* fix: make the solution work on the main frame

Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com>
Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

Author: 3 people

client/i18n/locales/english/translations.json

@@ -451,6 +451,7 @@
     "change-theme": "Sign in to change theme.",
     "translation-pending": "Help us translate",
     "certification-project": "Certification Project",
+    "iframe-preview": "{{title}} preview",
     "iframe-alert": "Normally this link would bring you to another website! It works. This is a link to: {{externalLink}}",
     "document-notfound": "document not found"
   },

client/src/templates/Challenges/utils/build.ts

@@ -279,14 +279,29 @@ export function updatePreview(
     buildData.challengeType === challengeTypes.html ||
     buildData.challengeType === challengeTypes.multifileCertProject
   ) {
-    createMainPreviewFramer(document, proxyLogger)(buildData);
+    createMainPreviewFramer(
+      document,
+      proxyLogger,
+      getDocumentTitle(buildData)
+    )(buildData);
   } else {
     throw new Error(
       `Cannot show preview for challenge type ${buildData.challengeType}`
     );
   }
 }
 
+function getDocumentTitle(buildData: BuildChallengeData) {
+  // Give iframe a title attribute for accessibility using the preview
+  // document's <title>.
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(buildData?.sources?.index, 'text/html');
+  const title = doc.querySelector('title');
+
+  return title?.innerText ?? 'challenge';
+}
+
 export function updateProjectPreview(
   buildData: BuildChallengeData,
   document: Document
@@ -295,15 +310,10 @@ export function updateProjectPreview(
     buildData.challengeType === challengeTypes.html ||
     buildData.challengeType === challengeTypes.multifileCertProject
   ) {
-    // Give iframe a title attribute for accessibility using the preview
-    // document's <title>.
-    const titleMatch = buildData?.sources?.index?.match(
-      /<title>(.*?)<\/title>/
-    );
-    const frameTitle = titleMatch
-      ? titleMatch[1].trim() + ' preview'
-      : 'preview';
-    createProjectPreviewFramer(document, frameTitle)(buildData);
+    createProjectPreviewFramer(
+      document,
+      getDocumentTitle(buildData)
+    )(buildData);
   } else {
     throw new Error(
       `Cannot show preview for challenge type ${buildData.challengeType}`

client/src/templates/Challenges/utils/frame.ts

@@ -124,7 +124,8 @@ const createFrame =
     const frame = document.createElement('iframe');
     frame.id = id;
     if (typeof title === 'string') {
-      frame.title = title;
+      frame.title = i18next.t('misc.iframe-preview', { title });
+      frame.lang = 'en';
     }
     return {
       ...frameContext,
@@ -268,15 +269,16 @@ const writeContentToFrame = (frameContext: Context) => {
 
 export const createMainPreviewFramer = (
   document: Document,
-  proxyLogger: ProxyLogger
+  proxyLogger: ProxyLogger,
+  frameTitle: string
 ) =>
   createFramer(
     document,
     mainPreviewId,
     initMainFrame,
     proxyLogger,
     undefined,
-    'preview'
+    frameTitle
   );
 
 export const createProjectPreviewFramer = (