pointer-focus-children.md

layout	tags
doc-api.html	browser-fix, service, argument-options

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.

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

Related resources

• ally.fix.pointerFocusInput
• ally.fix.pointerFocusParent

Contributing

• module source
• document source
• unit test
• functional test