Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>What gets focus when form control element is disabled?</title>
</head>
<body>
  <div tabindex="-1">
    <button type="button" class="disable-on-click">button disabled on click</button>
  </div>
  <div tabindex="-1">
    <button type="button" class="aria-disable-on-click">button aria-disabled on click</button>
  </div>
  
</body>
</html>
 
body :focus {
  outline: 2px solid red;
}
.wrapper {
  border: 1px solid black;
  padding: 5px;
}
div {
  padding: 5px;
}
div + div {
  margin-top: 10px;
}
 
[].forEach.call(document.querySelectorAll('.disable-on-click'), function(element) {
  element.addEventListener('click', function(event) {
    var _element = this;
    _element.disabled = true;
    setTimeout(function() {
      _element.disabled = false;
    }, 500)
  });
});
[].forEach.call(document.querySelectorAll('.aria-disable-on-click'), function(element) {
  element.addEventListener('click', function(event) {
    var _element = this;
    _element.setAttribute('aria-disabled', 'true');
    console.log('clicked')
    setTimeout(function() {
      _element.removeAttribute('aria-disabled');
    }, 1000)
  });
});
function abortIfAriaDisabled(event) {
  if (event.target.getAttribute('aria-disabled') !== 'true') {
    return;
  }
  event.preventDefault();
  event.stopPropagation();
}
document.addEventListener('mousedown', abortIfAriaDisabled, true);
document.addEventListener('mouseup', abortIfAriaDisabled, true);
document.addEventListener('click', abortIfAriaDisabled, true);
document.addEventListener('keydown', abortIfAriaDisabled, true);
document.addEventListener('keyup', abortIfAriaDisabled, true);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rodneyrehmpro
0viewers