fix(a11y): add title attribute to iframes (#45014)

* fix:add title attribute to iframes

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

@@ -208,7 +208,13 @@ export function updateProjectPreview(buildData, document) {
     buildData.challengeType === challengeTypes.html ||
     buildData.challengeType === challengeTypes.multiFileCertProject
   ) {
-    createProjectPreviewFramer(document)(buildData);
+    // 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] + ' preview' : 'preview';
+    createProjectPreviewFramer(document, frameTitle)(buildData);
   } else {
     throw new Error(
       `Cannot show preview for challenge type ${buildData.challengeType}`

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

@@ -61,9 +61,12 @@ export const runTestInTestFrame = async function (document, test, timeout) {
   ]);
 };
 
-const createFrame = (document, id) => ctx => {
+const createFrame = (document, id, title) => ctx => {
   const frame = document.createElement('iframe');
   frame.id = id;
+  if (typeof title === 'string') {
+    frame.title = title;
+  }
   return {
     ...ctx,
     element: frame
@@ -182,17 +185,38 @@ const writeContentToFrame = ctx => {
 };
 
 export const createMainPreviewFramer = (document, proxyLogger) =>
-  createFramer(document, mainPreviewId, initMainFrame, proxyLogger);
+  createFramer(
+    document,
+    mainPreviewId,
+    initMainFrame,
+    proxyLogger,
+    undefined,
+    'preview'
+  );
 
-export const createProjectPreviewFramer = document =>
-  createFramer(document, projectPreviewId, initPreviewFrame);
+export const createProjectPreviewFramer = (document, frameTitle) =>
+  createFramer(
+    document,
+    projectPreviewId,
+    initPreviewFrame,
+    undefined,
+    undefined,
+    frameTitle
+  );
 
 export const createTestFramer = (document, proxyLogger, frameReady) =>
   createFramer(document, testId, initTestFrame, proxyLogger, frameReady);
 
-const createFramer = (document, id, init, proxyLogger, frameReady) =>
+const createFramer = (
+  document,
+  id,
+  init,
+  proxyLogger,
+  frameReady,
+  frameTitle
+) =>
   flow(
-    createFrame(document, id),
+    createFrame(document, id, frameTitle),
     mountFrame(document, id),
     buildProxyConsole(proxyLogger),
     writeContentToFrame,