53 lines
3.5 KiB
HTML
53 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="en"><meta charset="utf-8"><title>Cthulhu Browser Probe</title>
|
|
<h1 tabindex="0">Action fixture start</h1>
|
|
<iframe title="Mode header" srcdoc="<!doctype html><body onload='document.onclick=function(event){if(event.target.closest("a")) parent.chooseMode(event.target.closest("a").id)}'><a id='Basic'>BASIC</a> <a id='Advanced'>ADVANCED</a><p>Plain header text</p></body>"></iframe>
|
|
<iframe id="content" title="Mode content" srcdoc="<!doctype html><p>Initial mode content</p>"></iframe>
|
|
<p>Plain body text</p>
|
|
<div id="custom" onclick="this.setAttribute('aria-label', 'Custom activated')"><span>Custom action</span><button>Nested button</button></div>
|
|
<a id="inactive">Anchor without action</a>
|
|
<a id="hidden" hidden onclick="chooseMode('Hidden')">Hidden action</a>
|
|
<a id="ordinary" href="#destination"><span>Ordinary link</span></a>
|
|
<p id="destination">Destination</p>
|
|
<div id="disclosure" onclick="document.getElementById('options').hidden = !document.getElementById('options').hidden; document.getElementById('activation-status').setAttribute('aria-label', document.getElementById('options').hidden ? 'Categories closed' : 'Categories opened')"><span>Choose category</span></div>
|
|
<div id="options" hidden style="height:30px; overflow:auto" tabindex="-1" onblur="if(this.hidden) return; this.hidden=true; document.getElementById('activation-status').setAttribute('aria-label', 'Categories closed by blur')"><ul style="margin:0; padding:0; list-style:none"><li onclick="this.dataset.selected='yes'"><span>First category</span></li><li onclick="this.dataset.selected='yes'"><span>Second category</span></li></ul></div>
|
|
<p>After categories</p>
|
|
<div id="activation-status" aria-label="Categories idle"></div>
|
|
<div style="height:1500px"></div>
|
|
<p id="distant-text">Distant text</p>
|
|
<div style="height:1500px"></div>
|
|
<img id="distant-image" alt="Distant image" width="32" height="32" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect width='32' height='32' fill='blue'/%3E%3C/svg%3E">
|
|
<script>
|
|
const viewportObserver = new IntersectionObserver(entries => {
|
|
for (const entry of entries) {
|
|
if (entry.intersectionRatio === 1) {
|
|
document.getElementById('activation-status').setAttribute('aria-label', `Viewport:${entry.target.id}`);
|
|
}
|
|
}
|
|
}, {threshold: 1});
|
|
viewportObserver.observe(document.getElementById('distant-text'));
|
|
viewportObserver.observe(document.getElementById('distant-image'));
|
|
document.addEventListener('scroll', event => {
|
|
const options = document.getElementById('options');
|
|
if (event.target === document && !options.hidden) {
|
|
options.hidden = true;
|
|
document.getElementById('activation-status').setAttribute('aria-label', 'Categories closed by scroll');
|
|
}
|
|
}, true);
|
|
document.addEventListener('selectionchange', () => {
|
|
const selection = document.getSelection();
|
|
const text = selection.anchorNode?.textContent;
|
|
if (text !== 'First category' && text !== 'Second category' && text !== 'Choose category') return;
|
|
const offset = selection.anchorOffset;
|
|
requestAnimationFrame(() => requestAnimationFrame(() => {
|
|
document.getElementById('activation-status').setAttribute('aria-label',
|
|
`Caret settled:${text}:${offset}:${document.getElementById('options').hidden ? 'closed' : 'open'}`);
|
|
}));
|
|
});
|
|
function chooseMode(mode) {
|
|
document.getElementById('content').srcdoc = '<!doctype html><p>' + mode + ' mode content</p>';
|
|
document.querySelector('h1').setAttribute('aria-label', mode + ' activated');
|
|
}
|
|
</script>
|
|
</html>
|