activeElement changes when button disabled during click

Fixed Issue #9548332

Details

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

Sign in to watch or report this issue.

Steps to reproduce

Load the following js fiddle and click the button:
https://jsfiddle.net/5t127q8h/

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">
</pre>

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

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

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

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

    • See https://allyjs.io/tutorials/mutating-active-element.html#the-results 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 https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule-one. I’ve submitted web platform tests to cover this: https://github.com/w3c/web-platform-tests/pull/4160

      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”

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

    Sign in