fix(respondable): work on iframes in shadow DOM

dequelabs · Mar 31, 2021 · 0b2548d · 0b2548d
1 parent 694f93f
commit 0b2548d
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 5 deletions.
diff --git a/lib/core/utils/respondable/assert-window.js b/lib/core/utils/respondable/assert-window.js
@@ -10,10 +10,10 @@ export function assertIsParentWindow(win) {
 
 export function assertIsFrameWindow(win) {
   assetNotGlobalWindow(win);
-  const frames = Array.from(window.frames);
-  if (!frames.some(frame => frame === win)) {
-    throw new Error('Respondable target must be a frame in the current window');
-  }
+  assert(
+    win.parent === window,
+    'Respondable target must be a frame in the current window'
+  );
 }
 
 export function assetNotGlobalWindow(win) {

diff --git a/test/core/utils/respondable.js b/test/core/utils/respondable.js
@@ -151,6 +151,35 @@ describe('axe.utils.respondable', function() {
       );
     });
 
+    it('works with frames in shadow DOM', function(done) {
+      fixture.innerHTML = '<div id="shadow-root"></div>';
+      var shadowRoot = fixture
+        .querySelector('#shadow-root')
+        .attachShadow({ mode: 'open' });
+      frame = document.createElement('iframe');
+      frame.src = '../mock/frames/test.html';
+
+      frame.addEventListener('load', function() {
+        var called = false;
+        frameWin = frame.contentWindow;
+        frameSubscribe = frameWin.axe.utils.respondable.subscribe;
+
+        frameSubscribe('greeting', function(msg) {
+          assert.equal(msg, 'hello');
+          called = true;
+        });
+        respondable(frameWin, 'greeting', 'hello');
+        afterMessage(
+          frameWin,
+          captureError(function() {
+            assert.isTrue(called);
+            done();
+          }, done)
+        );
+      });
+      shadowRoot.appendChild(frame);
+    });
+
     it('is not called on a different topic', function(done) {
       var called = false;
       frameSubscribe('otherTopic', function() {
@@ -226,6 +255,17 @@ describe('axe.utils.respondable', function() {
       respondable(frameWin, 'greeting', new Error('expected message'));
     });
 
+    (isIE11 ? it.skip : it)(
+      // In IE win.parent is read-only
+      'throws if frame.parent is not the window',
+      function() {
+        frameWin.parent = frameWin;
+        assert.throws(function() {
+          respondable(frameWin, 'greeting');
+        });
+      }
+    );
+
     (isIE11 ? it.skip : it)(
       // In IE win.parent is read-only
       'is not called when the source is not a frame in the page',
@@ -239,8 +279,10 @@ describe('axe.utils.respondable', function() {
         frameSubscribe('greeting', function() {
           doneOnce(new Error('subscribe should not be called'));
         });
-        frameWin.parent = frameWin;
         respondable(frameWin, 'greeting');
+        // Swap parent after the message is sent, but before it is received:
+        frameWin.parent = frameWin;
+
         setTimeout(
           captureError(function() {
             assert.isTrue(called);