ally.js

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

<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

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 jsbin.com

play with ally.fix.pointerFocusChildren Example on jsbin.com 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