test/pages/maintain.tab-focus.test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Maintain Tab Focus</title>
<style>
body :focus {
outline: 1px solid red;
}
</style>
</head>
<body>
<h1>Maintain Tab Focus</h1>
<input id="before">
<input id="before-1" tabindex="1">
<div id="container">
<input id="second">
<input id="first" tabindex="1">
<input id="third">
</div>
<input id="after">
<input id="after-1" tabindex="1">
<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/maintain/tab-focus',
], function(platform, maintainTabFocus) {
window._platform = platform;
maintainTabFocus({
context: '#container',
});
});
</script>
</body>
</html>