🔗ally.fix.pointerFocusChildren

This Browser Bug Workaround targets an issue in Internet Explorer 10 and 11 where the children of a focusable element styled with display: flex become focusable and react to being clicked on.

🔗Description

Considering the following markup, clicking on one of the <span> elements would focus the <span> instead of the <a>:

<style>
  .fancy-link {
    display: flex;
  }
  .fancy-link > span {
    flex: 1 1 10px;
    display: block;
  }
</style>

<a href="http://example.org/" class="fancy-link">
  <span>Hello</span>
  <span>World</span>
</a>

🔗Usage

// engage the workaround for the entire document
var handle = ally.fix.pointerFocusChildren();
// disengage the workaround
handle.disengage();

// engage the workaround only for a sub-tree
var handle = ally.fix.pointerFocusChildren({
  context: '#element-to-fix',
});

🔗Arguments

Name	Type	Default	Description
context	`<selector>`	`document`	The scope of the DOM in which to apply the fix. All elements of the collections are used.

🔗Returns

A <service> interface, providing the handle.disengage() method to stop the service.

🔗Examples

🔗Example: ally.fix.pointerFocusChildren Example

ally.fix.pointerFocusChildren Example on jsbin.com

play with the example on jsbin.com or open the source document

🔗Changes

Since v#master the module is executed on mousdown instead of pointerdown.

🔗Notes

NOTE: CSS Transitions are disabled for any styles changed on mousedown (and :active) on the erroneously focusable child elements.

NOTE: Only engaged for Internet Explorer 10 and 11 (detected via platform.js).

ally.js