ally.fix.pointerFocusChildren

September 28, 2016 ยท View on GitHub

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="https://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

NameTypeDefaultDescription
context<selector>documentThe 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.

Throws

Examples

@@@example /api/fix/pointer-focus-children.example.html

pointerFocusChildren example

@@@

Changes

  • Since v1.1.0 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). :::

Contributing