fix: allow shadow roots in axe.run contexts (#4952)

Before: if a shadow root (not the shadow host element, but an actual
[`ShadowRoot`](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot)
instance) is passed as part of context, it's silently ignored.

After: the shadow root node is substituted with its ~host element~
children for the rest of Axe algorithms to work with.

Closes: #4941

---------

Co-authored-by: Steven Lambert <2433219+straker@users.noreply.github.com>

Author: pomerantsev

lib/core/base/context/parse-selector-array.js

@@ -16,6 +16,14 @@ export function parseSelectorArray(context, type) {
     if (item instanceof window.Node) {
       if (item.documentElement instanceof window.Node) {
         result.push(context.flatTree[0]);
+      } else if (item.host instanceof window.Node) {
+        // Item is a shadow root. We only cache instances of `Element`,
+        // not `DocumentFragment`, so instead of the shadow root itself,
+        // we'll push all of its children to context.
+        const children = Array.from(item.children).map(child =>
+          getNodeFromTree(child)
+        );
+        result.push(...children);
       } else {
         result.push(getNodeFromTree(item));
       }

test/core/base/context.js

@@ -16,15 +16,15 @@ describe('Context', () => {
   it('should not mutate exclude in input', () => {
     fixture.innerHTML = '<div id="foo"></div>';
     const context = { exclude: [['iframe', '#foo']] };
-    // eslint-disable-next-line no-new
+
     new Context(context);
     assert.deepEqual(context, { exclude: [['iframe', '#foo']] });
   });
 
   it('should not mutate its include input', () => {
     fixture.innerHTML = '<div id="foo"></div>';
     const context = { include: [['#foo']] };
-    // eslint-disable-next-line no-new
+
     new Context(context);
     assert.deepEqual(context, { include: [['#foo']] });
   });
@@ -109,6 +109,19 @@ describe('Context', () => {
       assert.equal(result.include[0].props.id, 'target');
     });
 
+    it('accepts a reference to a ShadowRoot', () => {
+      createNestedShadowDom(
+        fixture,
+        '<article id="shadowHost"></article>',
+        `<h1 id="h1">Heading</h1>
+				<p id="p">Content</p>`
+      );
+      const shadowHost = fixture.querySelector('#shadowHost');
+      const shadowRoot = shadowHost.shadowRoot;
+      const result = new Context(shadowRoot);
+      assert.deepEqual(selectors(result.include), ['#h1', '#p']);
+    });
+
     it('accepts a node reference consisting of nested divs', () => {
       const div1 = document.createElement('div');
       const div2 = document.createElement('div');

test/integration/full/context/context.html

@@ -29,7 +29,7 @@
     </ul>
     <div id="shadow-container">
       <p id="test-passes">Passing Text</p>
-      <div id="shadow-host"></div>
+      <div id="shadow-host" aria-sort="both"></div>
     </div>
     <div id="mocha"></div>
     <script src="/test/testutils.js"></script>

test/integration/full/context/context.js

@@ -362,6 +362,51 @@ describe('context test', function () {
         }
       );
     });
+
+    describe('Shadow DOM', function () {
+      var sConfig = {
+        runOnly: {
+          type: 'rule',
+          values: ['aria-allowed-attr', 'color-contrast']
+        }
+      };
+      it('when passed a shadow host, reports issues both on itself and in the shadow DOM', function (done) {
+        axe.run('#shadow-host', sConfig, function (err, results) {
+          assert.isNull(err);
+          assert.lengthOf(results.violations, 2, 'violations');
+          var allowedAttrsViolations = results.violations.filter(
+            function (violation) {
+              return violation.id === 'aria-allowed-attr';
+            }
+          );
+          assert.lengthOf(
+            allowedAttrsViolations,
+            1,
+            'aria allowed attrs violations'
+          );
+          done();
+        });
+      });
+      it('when passed a shadow root, reports issues in the shadow DOM, but not on the host', function (done) {
+        var host = document.querySelector('#shadow-host');
+        var shadowRoot = host.shadowRoot;
+        axe.run(shadowRoot, sConfig, function (err, results) {
+          assert.isNull(err);
+          assert.lengthOf(results.violations, 1, 'violations');
+          var allowedAttrsViolations = results.violations.filter(
+            function (violation) {
+              return violation.id === 'aria-allowed-attr';
+            }
+          );
+          assert.lengthOf(
+            allowedAttrsViolations,
+            0,
+            'aria allowed attrs violations'
+          );
+          done();
+        });
+      });
+    });
   });
 
   describe('indirect include', function () {