Skip to content


JavaScript library to help modern web applications with accessibility concerns by making accessibility simpler

# 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>:

  .fancy-link {
    display: flex;
  .fancy-link > span {
    flex: 1 1 10px;
    display: block;

<a href="" class="fancy-link">

# Usage

// engage the workaround for the entire document
var handle = ally.fix.pointerFocusChildren();
// disengage the workaround
// 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

# ally.fix.pointerFocusChildren Example

ally.fix.pointerFocusChildren Example on

play with ally.fix.pointerFocusChildren Example on or open the document of ally.fix.pointerFocusChildren Example

# Changes

# Notes

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

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

# Contributing