test/pages/fix.pointer-focus-parent.test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fix Pointer Focus Parent Browser Bug</title>
<style>
.flex {
display: -webkit-flexbox;
display: -ms-flexbox;
display: flex;
width: 300px;
}
.flex > span {
display: block;
-ms-flex: 1 1 100px;
flex: 1 1 10px;
}
body :focus {
outline: 1px solid red;
}
</style>
</head>
<body>
<h1>Unhandled Parent Focus</h1>
<h2>Link</h2>
<div tabindex="-1" id="link-fail-parent">
<a href="#void" id="link-fail-source">target</a>
</div>
<hr>
<h1>Handled Parent Focus</h1>
<div id="engage-fix">
<h2>Link</h2>
<div tabindex="-1" id="link-fixed-parent">
<a href="#void" id="link-fixed-source">target</a>
</div>
</div>
<script src="../../node_modules/requirejs/require.js"></script>
<script>
require.config({
paths: {
ally: '../../dist/amd',
// shims required by ally.js
'css.escape': '../../node_modules/css.escape/css.escape',
'platform': '../../node_modules/platform/platform',
}
});
require([
'ally/util/platform',
'ally/fix/pointer-focus-parent',
], function(platform, fixPointerFocusParent) {
window._platform = platform;
fixPointerFocusParent({
context: '#engage-fix',
});
});
</script>
</body>
</html>