Skip to content

Instantly share code, notes, and snippets.

@hexalys

hexalys/focus-problem.md

Forked from bkardell/focus-problem.md
Last active August 29, 2015 14:23
Show Gist options
  • Save hexalys/05a10d234937bd56f65d to your computer and use it in GitHub Desktop.
Save hexalys/05a10d234937bd56f65d 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-focus.html
<!doctype html>
<html lang="en" onfocusout="javascript:if(document.activeElement.tagName === 'DIV' && !hasIEFocusableTabIndex(document.activeElement)){ document.activeElement.blur(); }">
<head>
<script>
var hasIEFocusableTabIndex = function(elem){
for (i = 0, len = elem.attributes.length; i < len; i++) {
if (elem.attributes[i].name === 'tabindex' && elem.tabIndex >= 0) { return true; }
}
return false;
};
</script>
<meta charset="utf-8">
<style>
* {margin: 3em !important;}
:focus { outline: 2px solid green; }
label { display: block; }
</style>
<title>Please explain this.</title>
</head>
<body>
<div id="foo" onfocus="alert('FooFocus');">This is a test. It illustrates a green outline around whatever has the focus - in IE that would be the body. Click this text, it should not set focus to this element, it's just a div and shouldn't be focusable - it's not.
But if you click the button above it sets a width of 750px on this div, then suddenly in IE, you can focus it by clicking with the mouse.</div>
<button onclick="document.querySelector('#foo').style.width='750px';">Demonstrate</button>
<div><p>This update is my attempt as a possible hack around IE's bad behavior demonstrated above, to prevent that particular misbehaving element from triggering focus:</p><p> It seems that we can rely on document.activeElement (or the previous element having focus and their 'focusout' event) with the active state of the div being triggered before focus, in order to apply a blur() before the element has a chance to fire focus(). This hack method seems to insure that focus never fires where it shouldn't, unless the element's focus is made focusable using tabindex=0. If you click demonstrate, click back and forth and never see an alert to :focus styling on the div, it should work.</p></div>
<div tabindex="0">This focusable div, with tabindex=0 set on the DOM, can focus normally</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment