Skip to content

Commit febba97

Browse files
bredmond5bredmond5
committed
add an iframe
1 parent 8fb780d commit febba97

File tree

2 files changed

+78
-23
lines changed

2 files changed

+78
-23
lines changed

‎examples/example.template.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,44 @@ <h2>Branch Metrics Web SDK Example</h2>
279279
<!-- </section>-->
280280
<!-- </div>-->
281281
<!-- </div>-->
282+
283+
<!-- Test iframe with button for accessibility testing -->
284+
<div class="test-iframe-container" style="margin: 20px 0;">
285+
<h3>Test iframe with button</h3>
286+
<iframe id="test-iframe" src="about:blank" style="width: 100%; height: 200px; border: 1px solid #ccc;"></iframe>
287+
<script>
288+
// Initialize the iframe with content containing a button
289+
window.addEventListener('DOMContentLoaded', function() {
290+
var iframe = document.getElementById('test-iframe');
291+
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
292+
293+
// Write HTML content to the iframe
294+
iframeDoc.open();
295+
iframeDoc.write(`
296+
<!DOCTYPE html>
297+
<html>
298+
<head>
299+
<meta name="accessibility" content="wcag">
300+
<title>Iframe Content</title>
301+
<style>
302+
body { font-family: Arial, sans-serif; padding: 20px; }
303+
button { padding: 10px 15px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }
304+
button:focus { outline: 2px solid blue; }
305+
</style>
306+
</head>
307+
<body>
308+
<h2>Inside iframe</h2>
309+
<p>This is content inside the iframe.</p>
310+
<button id="test-button">Click me!</button>
311+
<p>Try tabbing to this button to test accessibility.</p>
312+
</body>
313+
</html>
314+
`);
315+
iframeDoc.close();
316+
});
317+
</script>
318+
</div>
319+
282320
</div>
283321
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
284322
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

‎src/journeys_utils.js‎

Lines changed: 40 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -274,10 +274,10 @@ journeys_utils.addHtmlToIframe = function(iframe, html, userAgent) {
274274
bodyClass = 'branch-banner-other';
275275
}
276276
var iframedoc = iframe.contentDocument || iframe.contentWindow.document;
277-
iframedoc.head = iframedoc.createElement('head');
278-
iframedoc.body = iframedoc.createElement('body');
277+
// iframedoc.head = iframedoc.createElement('head');
278+
// iframedoc.body = iframedoc.createElement('body');
279279
iframedoc.body.innerHTML = html;
280-
iframedoc.body.className = bodyClass;
280+
// iframedoc.body.className = bodyClass;
281281
var metaTag = iframedoc.querySelector('meta[name="accessibility"]');
282282
if (metaTag && metaTag.content === 'wcag') {
283283
var scriptTag = iframedoc.createElement('script');
@@ -287,39 +287,56 @@ journeys_utils.addHtmlToIframe = function(iframe, html, userAgent) {
287287
var modal = document.getElementById('branch-banner');
288288
var focusableContent = modal.querySelectorAll(focusableElements);
289289
var focusElementIdx = 0;
290+
console.log("yogaba");
290291
291-
function handleTabKey(e) {
292+
function handleKeyboardNavigation(e) {
292293
var isTabPressed = e.key === 'Tab' || e.keyCode === 9;
293-
294-
if (!isTabPressed) {
295-
return;
296-
}
294+
var isEnterPressed = e.key === 'Enter' || e.keyCode === 13;
297295
298-
console.log('tab pressed');
299-
300-
if (e.shiftKey) {
301-
if (focusElementIdx <= 0) {
302-
focusElementIdx = focusableContent.length - 1;
296+
// Handle Tab key for focus navigation
297+
if (isTabPressed) {
298+
console.log("tab pressed");
299+
if (e.shiftKey) {
300+
if (focusElementIdx <= 0) {
301+
focusElementIdx = focusableContent.length - 1;
302+
} else {
303+
focusElementIdx = focusElementIdx - 1;
304+
}
303305
} else {
304-
focusElementIdx = focusElementIdx - 1;
306+
if (focusElementIdx >= focusableContent.length - 1) {
307+
focusElementIdx = 0;
308+
} else {
309+
focusElementIdx = focusElementIdx + 1;
310+
}
305311
}
306-
} else {
307-
if (focusElementIdx >= focusableContent.length - 1) {
308-
focusElementIdx = 0;
309-
} else {
310-
focusElementIdx = focusElementIdx + 1;
312+
313+
focusableContent[focusElementIdx].focus();
314+
e.preventDefault();
315+
return;
316+
}
317+
318+
// Handle Enter key for activation
319+
if (isEnterPressed) {
320+
console.log("enter pressed");
321+
// Get the currently focused element
322+
var focusedElement = document.activeElement;
323+
if (focusedElement && (
324+
focusedElement.tagName === 'BUTTON' ||
325+
focusedElement.getAttribute('role') === 'button' ||
326+
focusedElement.tagName === 'A'
327+
)) {
328+
// Simulate a click on the element
329+
focusedElement.click();
330+
e.preventDefault();
311331
}
312332
}
313-
314-
focusableContent[focusElementIdx].focus();
315-
e.preventDefault();
316333
}
317334
318335
function autoFocus(delay) {
319336
setTimeout(function() { focusableContent[focusElementIdx].focus() }, delay);
320337
}
321338
322-
document.addEventListener('keydown', handleTabKey);
339+
document.addEventListener('keydown', handleKeyboardNavigation);
323340
autoFocus(100);
324341
325342
`;

0 commit comments

Comments
 (0)