dojo · agubler · Jan 6, 2020 · Dec 23, 2019 · Dec 31, 2019 · Dec 31, 2019
diff --git a/docs/en/middleware/supplemental.md b/docs/en/middleware/supplemental.md
@@ -394,6 +394,52 @@ const myCustomBreakpoint = createBreakpointMiddleware({ Narrow: 0, Wide: 500 });
 export default myCustomBreakpoint;
 ```
 
+## `inert`
+
+Enables setting the [`inert`](https://html.spec.whatwg.org/multipage/interaction.html#inert) property on a node by `key`. This will ensure that the node in question does not respond to actions such as focus, mouse event etc. For scenarios such as a dialog that is attached to the `document.body`, `inert` can be inverted onto all the siblings of the `key`s node.
+
+**API:**
+
+```ts
+import inert from '@dojo/framework/core/middleware/inert';
+```
+
+-   `inert.set(key: string | number, enable: boolean, invert: boolean = false): void;`
+    -   Sets inert to the requested value for the node. When `invert` is passed the value will be set on all node's siblings.
+
+> src/widgets/Dialog.tsx
+
+```tsx
+import { create, tsx } from '@dojo/framework/core/vdom';
+import inert from '@dojo/framework/core/middleware/inert';
+import icache from '@dojo/framework/core/middleware/icache';
+
+const factory = create({ inert, icache }).properties<{ open: boolean; onRequestClose: () => void }>();
+
+export default factory(function Dialog({ children, properties, middleware: { inert, icache } }) {
+	const { open } = properties();
+	if (!open) {
+		return null;
+	}
+	inert.set('dialog', true, true);
+	return (
+		<body>
+			<div key="dialog">
+				<button
+					onclick={() => {
+						inert.set('dialog', false, true);
+						properties().onRequestClose();
+					}}
+				>
+					Close
+				</button>
+				{children()}
+			</div>
+		</body>
+	);
+});
+```
+
 ## `store`
 
 Provides widgets access to their externalized state when using the Dojo stores component.

diff --git a/src/core/middleware/inert.ts b/src/core/middleware/inert.ts
@@ -0,0 +1,54 @@
+import { create, node, destroy } from '../vdom';
+import { from as arrayFrom } from '../../shim/array';
+import Map from '../../shim/Map';
+import '../../shim/inert';
+
+const factory = create({ node, destroy });
+
+export const inert = factory(({ middleware: { node, destroy } }) => {
+	const inertInvertedNodeMap = new Map<string | number, any[]>();
+	destroy(() => {
+		inertInvertedNodeMap.forEach((nodes) => {
+			nodes.forEach((node) => {
+				node.inert = false;
+			});
+		});
+		inertInvertedNodeMap.clear();
+	});
+	return {
+		set(key: string | number, enable: boolean, invert: boolean = false): void {
+			const domNode = node.get(key) as any;
+			if (!domNode) {
+				return;
+			}
+
+			if (invert) {
+				const inertNodes = inertInvertedNodeMap.get(key) || [];
+				if (enable) {
+					domNode.inert = false;
+					if (domNode.parentNode) {
+						const children = arrayFrom(domNode.parentNode.children) as any[];
+						for (let i = 0; i < children.length; i++) {
+							if (domNode !== children[i] && inertNodes.indexOf(children[i]) === -1) {
+								children[i].inert = true;
+								inertNodes.push(children[i]);
+							}
+						}
+					}
+					inertInvertedNodeMap.set(key, inertNodes);
+				} else {
+					if (inertNodes.length) {
+						inertNodes.forEach((node) => {
+							node.inert = false;
+						});
+						inertInvertedNodeMap.delete(key);
+					}
+				}
+			} else {
+				domNode.inert = enable;
+			}
+		}
+	};
+});
+
+export default inert;
diff --git a/src/shim/util/amd.ts b/src/shim/util/amd.ts
@@ -44,6 +44,12 @@ function shimAmdDependencies(config: any) {
 		location: 'node_modules/@dojo'
 	});
 
+	addIfNotPresent(packages, {
+		name: 'wicg-inert',
+		location: 'node_modules/wicg-inert/dist',
+		main: 'inert.min'
+	});
+
 	config.packages = packages;
 
 	return config;

diff --git a/tests/core/support/jsdom-plugin.ts b/tests/core/support/jsdom-plugin.ts
@@ -57,6 +57,17 @@ intern.registerPlugin('jsdom', async () => {
 			return true;
 		};
 
+		global.MutationObserver = function MutationObserver() {
+			return {
+				observe: function() {
+					return [];
+				},
+				takeRecords: function() {
+					return [];
+				}
+			};
+		};
+
 		global.cancelAnimationFrame = () => {};
 		global.IntersectionObserver = () => {};
 

diff --git a/tests/core/unit/middleware/all.ts b/tests/core/unit/middleware/all.ts
@@ -5,6 +5,7 @@ import './dimensions';
 import './i18n';
 import './focus';
 import './icache';
+import './inert';
 import './injector';
 import './intersection';
 import './resize';

diff --git a/tests/core/unit/middleware/inert.ts b/tests/core/unit/middleware/inert.ts
@@ -0,0 +1,106 @@
+import global from '../../../../src/shim/global';
+const { it } = intern.getInterface('bdd');
+const { describe: jsdomDescribe } = intern.getPlugin('jsdom');
+const { assert } = intern.getPlugin('chai');
+import { sandbox } from 'sinon';
+
+import inertMiddleware from '../../../../src/core/middleware/inert';
+
+const sb = sandbox.create();
+
+jsdomDescribe('inert middleware', () => {
+	it('should set node inert property', () => {
+		const node = global.document.createElement('div');
+
+		const inert = inertMiddleware().callback({
+			id: 'test',
+			middleware: {
+				destroy: sb.stub(),
+				node: {
+					get() {
+						return node;
+					}
+				}
+			},
+			properties: () => ({}),
+			children: () => []
+		});
+		inert.set('key', true);
+		assert.strictEqual(node.inert, true);
+		inert.set('key', false);
+		assert.strictEqual(node.inert, false);
+	});
+
+	it('should set node inert property on all siblings when using invert', () => {
+		const parent = global.document.createElement('div');
+		const childOne = global.document.createElement('div');
+		const childTwo = global.document.createElement('div');
+		const childThree = global.document.createElement('div');
+		const node = global.document.createElement('div');
+		parent.appendChild(childOne);
+		parent.appendChild(childTwo);
+		parent.appendChild(childThree);
+		parent.appendChild(node);
+
+		const inert = inertMiddleware().callback({
+			id: 'test',
+			middleware: {
+				destroy: sb.stub(),
+				node: {
+					get() {
+						return node;
+					}
+				}
+			},
+			properties: () => ({}),
+			children: () => []
+		});
+		inert.set('key', true, true);
+		assert.strictEqual(node.inert, false);
+		assert.strictEqual(childOne.inert, true);
+		assert.strictEqual(childTwo.inert, true);
+		assert.strictEqual(childThree.inert, true);
+		inert.set('key', false, true);
+		assert.strictEqual(node.inert, false);
+		assert.strictEqual(childOne.inert, false);
+		assert.strictEqual(childTwo.inert, false);
+		assert.strictEqual(childThree.inert, false);
+	});
+
+	it('should reset inert and remove node from map on destroy', () => {
+		const parent = global.document.createElement('div');
+		const childOne = global.document.createElement('div');
+		const childTwo = global.document.createElement('div');
+		const childThree = global.document.createElement('div');
+		const node = global.document.createElement('div');
+		parent.appendChild(childOne);
+		parent.appendChild(childTwo);
+		parent.appendChild(childThree);
+		parent.appendChild(node);
+		const destroyStub = sb.stub();
+
+		const inert = inertMiddleware().callback({
+			id: 'test',
+			middleware: {
+				destroy: destroyStub,
+				node: {
+					get() {
+						return node;
+					}
+				}
+			},
+			properties: () => ({}),
+			children: () => []
+		});
+		inert.set('key', true, true);
+		assert.strictEqual(node.inert, false);
+		assert.strictEqual(childOne.inert, true);
+		assert.strictEqual(childTwo.inert, true);
+		assert.strictEqual(childThree.inert, true);
+		destroyStub.callArg(0);
+		assert.strictEqual(node.inert, false);
+		assert.strictEqual(childOne.inert, false);
+		assert.strictEqual(childTwo.inert, false);
+		assert.strictEqual(childThree.inert, false);
+	});
+});
diff --git a/tests/shim/functional/amd.ts b/tests/shim/functional/amd.ts
@@ -26,8 +26,9 @@ registerSuite('AMD Util', {
 				undefined
 			)
 			.then((config: any) => {
-				assert.lengthOf(config.packages, 7);
+				assert.lengthOf(config.packages, 8);
 				assert.lengthOf(config.packages.filter((p: any) => p.name === 'pepjs'), 1);
+				assert.lengthOf(config.packages.filter((p: any) => p.name === 'wicg-inert'), 1);
 				assert.lengthOf(config.packages.filter((p: any) => p.name === 'tslib'), 1);
 				assert.lengthOf(config.packages.filter((p: any) => p.name === 'intersection-observer'), 1);
 				assert.lengthOf(config.packages.filter((p: any) => p.name === '@dojo'), 1);