activeElement changes when button disabled during click

Issue #9548332 • Assigned to Francois R.


Tim M.
Oct 27, 2016
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Found in build #
Reported by 4 people

Sign in to watch or report this issue.

Steps to reproduce

Load the following js fiddle and click the button:

RESULT: In edge/IE the activeElement is the body. In chrome/firefox the activeElement is the button.

When a button disables itself while handling a click event the activeElement changes. It is confusing for accessible users when the activeElement jumps to the body. We need the activeElement to remain on the button (like chrome/firefox). That way tabbing can continue in the normal order. Possible work-around is to wrap the button with an element having tabindex=-1.

<input id="before" tabindex="0" type="button" value="before"/>
<input id="clickme" tabindex="0" type="button" value="clickme"/>
<input id="after" tabindex="0" type="button" value="after"/>
<pre id="output">

$("#clickme").on("click", function ()  {
  $("#clickme").prop("disabled", true);
  $("#clickme").attr("tabindex", -1);

  $("#output").append("activeElement: " +
    ( || document.activeElement.tagName) + "\n");

  setTimeout(function () {
    $("#clickme").prop("disabled", false);
    $("#clickme").attr("tabindex", 0);
   }, 1000);


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

    • See for a matrix of browser behavior.

      Internet Explorer / Edge are the only browsers shifting focus to the first focusable ancestor (or `` if no focusable ancestor exists) when the currently focused element is disabled. The element should remain focused to match behavior of the other browsers. Note that “bubbling” focus to an ancestor only happens when disabling the element, but not when hiding it or removing the tabindex attribute.

    • Per spec, the correct behavior is to reset to the body, not to the OP’s "next element". See I’ve submitted web platform tests to cover this:

      Edge gets it right for the cases of disabling the active element and removing it from the DOM, but not for hiding it or removing the tabindex from a div.

    • Microsoft Edge Team

      Changed Assigned To to “Travis L.”

      Changed Status to “Fixed”

      Changed Assigned To to “Arron E.”

      Changed Status from “Fixed”

    • The issue is confirmed not to be fixed. Reverting the current state, then duping to the internal issue tracking this behavior.

    • Microsoft Edge Team

      Changed Status

      Changed Assigned To to “Francois R.”

      Changed Status

    You need to sign in to your Microsoft account to add a comment.

    Sign in