watch for [data-inert] elements and turn them inerted as well (WICG#126)

.eslintrc

@@ -12,6 +12,7 @@
       "code": 100,
       "tabWidth": 2,
       "ignoreUrls": true
-    }]
+    }],
+    "linebreak-style": ["error", "windows"]
   }
 }

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' +

test/fixtures/data-attribute.html

@@ -0,0 +1,10 @@
+<!--
+This work is licensed under the W3C Software and Document License
+(http://www.w3.org/Consortium/Legal/2015/copyright-software-and-document).
+-->
+
+<div data-inert>
+  <button>Click Me</button>
+  <div id="fake-button" tabindex="0">Click me</div>
+</div>
+<button id="non-inert">Non-inert button</button>

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);
+  });
+});