diff --git a/.eslintrc b/.eslintrc
index f9fae93..d47ae82 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -12,6 +12,7 @@
"code": 100,
"tabWidth": 2,
"ignoreUrls": true
- }]
+ }],
+ "linebreak-style": ["error", "windows"]
}
}
diff --git a/package-lock.json b/package-lock.json
index c7c0017..541fd10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3180,8 +3180,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"aproba": {
"version": "1.2.0",
@@ -3202,14 +3201,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -3224,20 +3221,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -3354,8 +3348,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"ini": {
"version": "1.3.5",
@@ -3367,7 +3360,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -3382,7 +3374,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -3390,14 +3381,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
@@ -3416,7 +3405,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -3497,8 +3485,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"object-assign": {
"version": "4.1.1",
@@ -3510,7 +3497,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"wrappy": "1"
}
@@ -3596,8 +3582,7 @@
"safe-buffer": {
"version": "5.1.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -3633,7 +3618,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -3653,7 +3637,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
- "optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -3697,14 +3680,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"yallist": {
"version": "3.0.2",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
}
}
},
diff --git a/src/inert.js b/src/inert.js
index 07e5d76..99a4704 100644
--- a/src/inert.js
+++ b/src/inert.js
@@ -467,6 +467,12 @@ class InertManager {
*/
this._observer = new MutationObserver(this._watchForInert.bind(this));
+ /**
+ * Selector for elements that should be inerted
+ * @type string
+ * */
+ this._inertSelector = '[inert], [data-inert]';
+
// Add inert style.
addInertStyle(document.head || document.body || document.documentElement);
@@ -573,7 +579,7 @@ class InertManager {
*/
_onDocumentLoaded() {
// Find all inert roots in document and make them actually inert.
- const inertElements = slice.call(this._document.querySelectorAll('[inert]'));
+ const inertElements = slice.call(this._document.querySelectorAll(this._inertSelector));
inertElements.forEach(function(inertElement) {
this.setInert(inertElement, true);
}, this);
@@ -596,8 +602,8 @@ class InertManager {
if (node.nodeType !== Node.ELEMENT_NODE) {
return;
}
- const inertElements = slice.call(node.querySelectorAll('[inert]'));
- if (node.matches('[inert]')) {
+ const inertElements = slice.call(node.querySelectorAll(this._inertSelector));
+ if (node.matches(this._inertSelector)) {
inertElements.unshift(node);
}
inertElements.forEach(function(inertElement) {
@@ -691,12 +697,12 @@ function addInertStyle(node) {
const style = document.createElement('style');
style.setAttribute('id', 'inert-style');
style.textContent = '\n'+
- '[inert] {\n' +
+ '[inert], [data-inert] {\n' +
' pointer-events: none;\n' +
' cursor: default;\n' +
'}\n' +
'\n' +
- '[inert], [inert] * {\n' +
+ '[inert], [data-inert], [inert] *, [data-inert] * {\n' +
' user-select: none;\n' +
' -webkit-user-select: none;\n' +
' -moz-user-select: none;\n' +
diff --git a/test/fixtures/data-attribute.html b/test/fixtures/data-attribute.html
new file mode 100644
index 0000000..aed4b37
--- /dev/null
+++ b/test/fixtures/data-attribute.html
@@ -0,0 +1,10 @@
+
+
+
+
diff --git a/test/specs/data-attribute.spec.js b/test/specs/data-attribute.spec.js
new file mode 100644
index 0000000..4bf6a55
--- /dev/null
+++ b/test/specs/data-attribute.spec.js
@@ -0,0 +1,29 @@
+describe('Data-Attribute', function() {
+ before(function() {
+ fixture.setBase('test/fixtures');
+ });
+
+ beforeEach(function(done) {
+ fixture.load('data-attribute.html');
+ // Because inert relies on MutationObservers,
+ // wait till next microtask before running tests.
+ setTimeout(function() {
+ done();
+ }, 0);
+ });
+
+ afterEach(function() {
+ fixture.cleanup();
+ });
+
+ it('should make implicitly focusable child not focusable', function() {
+ var button = fixture.el.querySelector('[data-inert] button');
+ expect(isUnfocusable(button)).to.equal(true);
+ });
+
+ it('should make explicitly focusable child not focusable', function() {
+ var div = fixture.el.querySelector('#fake-button');
+ expect(div.hasAttribute('tabindex')).to.equal(false);
+ expect(isUnfocusable(div)).to.equal(true);
+ });
+});