docs(material/tree): fix demos where keyboard navigates to hidden nodes

Fix an issue in the tree demos where the keyboard can navigate to nodes
that are not rendered to the screen. This happend because nodes where
hidden using CSS and the TreeKeyManager did not know to skip over them.
Fix this issue by disabled nodes that are hidden so that the
TreeKeyManager will skip them.

Steps to reproduce issue
1. Go to CDK Flat tree (levelAccessor) demo
2. Tab onto Fruit
3. Press down the up
4. (Expands the collapses)
5. Press down
6. (Expecting Vegetables to be focused but focus ring is still around Fruit)
7. Press down five times.
8. (Focus ring is around Fruit).

With this commit applied, above issue no longer reproduces.

This commit message is only for code reviewers and can be deleted when
landing this change in main.

Author: zarend

src/components-examples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example.html

@@ -2,6 +2,7 @@
   <!-- This is the tree node template for leaf nodes -->
   <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding
                  [style.display]="shouldRender(node) ? 'flex' : 'none'"
+                 [isDisabled]="!shouldRender(node)"
                  class="example-tree-node">
     <!-- use a disabled button to provide padding for tree leaf -->
     <button mat-icon-button disabled></button>
@@ -10,6 +11,7 @@
   <!-- This is the tree node template for expandable nodes -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
                  [style.display]="shouldRender(node) ? 'flex' : 'none'"
+                 [isDisabled]="!shouldRender(node)"
                  [isExpandable]="true"
                  class="example-tree-node">
     <button mat-icon-button cdkTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name">

src/components-examples/cdk/tree/cdk-tree-flat-level-accessor/cdk-tree-flat-level-accessor-example.html

@@ -2,6 +2,7 @@
   <!-- This is the tree node template for leaf nodes -->
   <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding
                  [style.display]="shouldRender(node) ? 'flex' : 'none'"
+                 [isDisabled]="!shouldRender(node)"
                  class="example-tree-node">
     <!-- use a disabled button to provide padding for tree leaf -->
     <button mat-icon-button disabled></button>
@@ -10,6 +11,7 @@
   <!-- This is the tree node template for expandable nodes -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
                  [style.display]="shouldRender(node) ? 'flex' : 'none'"
+                 [isDisabled]="!shouldRender(node)"
                  [isExpandable]="node.expandable"
                  class="example-tree-node">
     <button mat-icon-button cdkTreeNodeToggle

src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.html

@@ -1,11 +1,13 @@
 <cdk-tree #tree [dataSource]="dataSource" [levelAccessor]="levelAccessor">
   <!-- This is the tree node template for leaf nodes -->
-  <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="example-tree-node">
+  <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="example-tree-node"
+                        [isDisabled]="!shouldRender(node)">
     {{node.name}}
   </cdk-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasChild"
                         [isExpandable]="node.expandable"
+                        [isDisabled]="!shouldRender(node)"
                         class="example-tree-node example-expandable">
     <button mat-icon-button cdkTreeNodeToggle
             [attr.aria-label]="'Toggle ' + node.name"

src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.ts

@@ -1,5 +1,5 @@
 import {ArrayDataSource} from '@angular/cdk/collections';
-import {CdkTreeModule} from '@angular/cdk/tree';
+import {CdkTree, CdkTreeModule} from '@angular/cdk/tree';
 import {Component} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
@@ -16,9 +16,31 @@ import {FLAT_DATA, FlatFoodNode} from '../tree-data';
   imports: [CdkTreeModule, MatButtonModule, MatIconModule],
 })
 export class CdkTreeNestedLevelAccessorExample {
+  tree: CdkTree<FlatFoodNode>;
+
   levelAccessor = (dataNode: FlatFoodNode) => dataNode.level;
 
   dataSource = new ArrayDataSource(FLAT_DATA);
 
   hasChild = (_: number, node: FlatFoodNode) => node.expandable;
+
+  getParentNode(node: FlatFoodNode) {
+    const nodeIndex = FLAT_DATA.indexOf(node);
+
+    // Determine the node's parent by finding the first preceding node that's
+    // one level shallower.
+    for (let i = nodeIndex - 1; i >= 0; i--) {
+      if (FLAT_DATA[i].level === node.level - 1) {
+        return FLAT_DATA[i];
+      }
+    }
+
+    return null;
+  }
+
+  shouldRender(node: FlatFoodNode): boolean {
+    // This node should render if it is a root node or if all of its ancestors are expanded.
+    const parent = this.getParentNode(node);
+    return !parent || (!!this.tree?.isExpanded(parent) && this.shouldRender(parent));
+  }
 }