fix(focus-trap): server-side rendering error (#9001)

Fixes a server-side rendering error due to the `Node` class not being being available in Universal.

Fixes #8981.

Author: crisbeto

src/cdk/a11y/focus-trap.ts

@@ -21,6 +21,12 @@ import {take} from 'rxjs/operators/take';
 import {InteractivityChecker} from './interactivity-checker';
 import {DOCUMENT} from '@angular/common';
 
+/**
+ * Node type of element nodes. Used instead of Node.ELEMENT_NODE
+ * which is unsupported in Universal.
+ * @docs-private
+*/
+const ELEMENT_NODE_TYPE = 1;
 
 /**
  * Class that allows for trapping focus within a DOM element.
@@ -223,7 +229,7 @@ export class FocusTrap {
     let children = root.children || root.childNodes;
 
     for (let i = 0; i < children.length; i++) {
-      let tabbableChild = children[i].nodeType === Node.ELEMENT_NODE ?
+      let tabbableChild = children[i].nodeType === ELEMENT_NODE_TYPE ?
         this._getFirstTabbableElement(children[i] as HTMLElement) :
         null;
 
@@ -245,7 +251,7 @@ export class FocusTrap {
     let children = root.children || root.childNodes;
 
     for (let i = children.length - 1; i >= 0; i--) {
-      let tabbableChild = children[i].nodeType === Node.ELEMENT_NODE ?
+      let tabbableChild = children[i].nodeType === ELEMENT_NODE_TYPE ?
         this._getLastTabbableElement(children[i] as HTMLElement) :
         null;
 

src/lib/icon/icon-registry.ts

@@ -421,7 +421,8 @@ export class MatIconRegistry {
     let svg = this._svgElementFromString('<svg></svg>');
 
     for (let i = 0; i < element.childNodes.length; i++) {
-      if (element.childNodes[i].nodeType === Node.ELEMENT_NODE) {
+      // Note: 1 corresponds to `Node.ELEMENT_NODE` which we can't use in Universal.
+      if (element.childNodes[i].nodeType === 1) {
         svg.appendChild(element.childNodes[i].cloneNode(true));
       }
     }

src/universal-app/kitchen-sink/kitchen-sink.html

@@ -177,7 +177,10 @@ <h2>Select</h2>
 
 <h2>Sidenav</h2>
 <mat-sidenav-container>
-  <mat-sidenav opened>On the side</mat-sidenav>
+  <mat-sidenav opened>
+    On the side
+    <button>Button for testing focus trapping</button>
+  </mat-sidenav>
   Main content
   <button>Click me</button>
 </mat-sidenav-container>