Skip to content

Update iframe title when changing its src to improve accessibility. #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ignaciogros wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Update iframe title when changing its src to improve accessibility. #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c227d7c
Update `iframe` title when changing its `src` to improve accessibility.
ignaciogros May 6, 2026
1735a5c
Update `iframe` title when changing its `src` to improve accessibilit…
ignaciogros May 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion amd/build/resize.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 22 additions & 2 deletions amd/src/resize.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,18 @@

import Log from 'core/log';

let contentName = '';

const updateIframeTitle = function(iframe) {
try {
const rawTitle = iframe.contentDocument && iframe.contentDocument.title;
const pageTitle = rawTitle ? rawTitle.replace(/\s*\|[^|]*$/, '').replace(/['"]/g, '').trim() : rawTitle;
iframe.title = pageTitle ? contentName + ': ' + pageTitle : contentName;
} catch (e) {
// cross-origin content, keep existing title
}
};

/**
* Resizes iFrame and container height to iframes body size.
* This function is to be declared on window namespace so iframe onload event can find it.
Expand All @@ -49,15 +61,22 @@ export const exewebResize = function() {
*/
export const exewebIframeOnload = function(event) {
exewebResize();
let iFrame = event.target;
updateIframeTitle(iFrame);
// Set a mutation observer, so we can adapt to changes from iFrame's javascript (such
// as tab clicks o hide/show sections).
let iFrame = event.target;
const config = {attributes: true, childList: true, subtree: true};
const observer = new MutationObserver(window.exewebResize);
observer.observe(iFrame.contentDocument.body, config);
// Watch for title changes caused by hash-based navigation within the same page.
const titleEl = iFrame.contentDocument.querySelector('title');
if (titleEl) {
new MutationObserver(() => updateIframeTitle(iFrame)).observe(titleEl, {childList: true});
}
};

export const init = () => {
export const init = (iframeid, name) => {
contentName = name || '';
// Declare on window namespace so iframe onload event can find it.
window.exewebResize = exewebResize;
window.exewebIframeOnload = exewebIframeOnload;
Expand All @@ -69,6 +88,7 @@ export const init = () => {

if (iframe.contentDocument.readyState === 'complete') {
exewebResize();
updateIframeTitle(iframe);
}

// Watch for page changes.
Expand Down
2 changes: 1 addition & 1 deletion view.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
$renderer = $PAGE->get_renderer('mod_exeweb');

$PAGE->requires->js_call_amd('mod_exeweb/fullscreen', 'init');
$PAGE->requires->js_call_amd('mod_exeweb/resize', 'init', ['exewebobject', ]);
$PAGE->requires->js_call_amd('mod_exeweb/resize', 'init', ['exewebobject', $exeweb->name]);
$PAGE->requires->js_call_amd('mod_exeweb/editor_modal', 'init');
switch ($displaytype) {
case RESOURCELIB_DISPLAY_EMBED:
Expand Down
Loading