diff --git a/client/src/templates/Challenges/utils/build.js b/client/src/templates/Challenges/utils/build.js
index 304f7c6280..ae3b73c38a 100644
--- a/client/src/templates/Challenges/utils/build.js
+++ b/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
.
+ const titleMatch = buildData?.sources?.index?.match(
+ /(.*?)<\/title>/
+ );
+ const frameTitle = titleMatch ? titleMatch[1] + ' preview' : 'preview';
+ createProjectPreviewFramer(document, frameTitle)(buildData);
} else {
throw new Error(
`Cannot show preview for challenge type ${buildData.challengeType}`
diff --git a/client/src/templates/Challenges/utils/frame.js b/client/src/templates/Challenges/utils/frame.js
index 48b511e268..c8d2939b42 100644
--- a/client/src/templates/Challenges/utils/frame.js
+++ b/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,