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>(.*?)<\/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,