Skip to content

Instantly share code, notes, and snippets.

@bkardell

bkardell/focus-problem.md

Last active August 29, 2015 14:23
Show Gist options
  • Save bkardell/93a8d267e4848265a4d8 to your computer and use it in GitHub Desktop.
Save bkardell/93a8d267e4848265a4d8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
focus-problem.md
  • Go to http://todomvc.com/ in IE10 or 11
  • using f12 tools, add a rule that says :focus { border: 2px solid green; }
  • using the mouse click on various bits of text/empty space - you will see elements that are not keyboard focusable get the outline
  • press tab and you will see that that thing really did 'have the focus' (you can also do document.activeElement to verify)

I cannot see why/what circumstances this happens, when it does setting tabindex=-1 doesn't seem to impact.

I'm concerned that these are receiving focus because the focus indicatoractually seems to be "doing the right thing" from an a11y standpoint, so selectively styling it or not doesn't seem right. To me it seems that the real 'problem' is that it got focus in the first place - other browsers don't seem to do this.

Raw
isolated-clickfocus.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
:not(.click-focus):focus { outline: 2px solid green; }
label { display: block; }
</style>
<title>Please explain this.</title>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.body.addEventListener("mousedown", function (evt) {
if (!evt.target.setSelectionRange) {
evt.target.classList.add("click-focus");
}
});
document.body.addEventListener("blur", function (evt) {
evt.srcElement.classList.remove("click-focus");
}, true);
});
document.addEventListener("DOMContentLoaded", function () {
var lastFocused;
document.body.addEventListener("focus", function (e) {
lastFocused = e.srcElement.tagName;
}, true);
setInterval(function () {
document.querySelector("#bonus1").value = lastFocused;
document.querySelector("#bonus2").value = document.querySelector("#foo").tabIndex;
}, 500);
}, false);
</script>
</head>
<body>
<div id="foo" >This is a test. Click this text, it should not set focus to this element, it's just a div and shouldnt be focusable - it's not.
But if you click the button above it sets a width of 10em on this div, then suddenly <strong><em>for some reason in IE</em></strong> you can focus it by clicking with the mouse...
Your CSS is affecting actual focusability, not just what you're seeing painted O_o.
</div>
<button onclick="document.querySelector('#foo').style.width='10em';">Demonstrate</button>
<hr>
<strong>Bonus</strong>
<label>What's the last tagName .focus fired on?</label><input id="bonus1">
<label>What's the .tabIndex of #foo? </label><input id="bonus2">
</body>
</html>
Raw
isolated-focus.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
:focus { outline: 2px solid green; }
label { display: block; }
</style>
<title>Please explain this.</title>
<script>
document.addEventListener("DOMContentLoaded", function () {
var lastFocused;
document.body.addEventListener("focus", function (e) {
lastFocused = e.srcElement.tagName;
}, true);
setInterval(function () {
document.querySelector("#bonus1").value = lastFocused;
document.querySelector("#bonus2").value = document.querySelector("#foo").tabIndex;
}, 500);
}, false);
</script>
</head>
<body>
<div id="foo" >This is a test. Click this text, it should not set focus to this element, it's just a div and shouldnt be focusable - it's not.
But if you click the button above it sets a width of 10em on this div, then suddenly <strong><em>for some reason in IE</em></strong> you can focus it by clicking with the mouse...
Your CSS is affecting actual focusability, not just what you're seeing painted O_o.
</div>
<button onclick="document.querySelector('#foo').style.width='10em';">Demonstrate</button>
<hr>
<strong>Bonus</strong>
<label>What's the last tagName .focus fired on?</label><input id="bonus1">
<label>What's the .tabIndex of #foo? </label><input id="bonus2">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment