docs(tree): A11Y improvement for Nested Tree example. (#22583)

* docs(material/tree): A11Y improvement for Nested Tree example.

Fixes #22517

* docs(material/tree): A11Y improvement for Nested Tree example.

Fixes #22517

* docs(material/tree): Fixing nested tree styles.
Use padding-left instead of padding-inline-start.

(cherry picked from commit 46c2d26)

Author: walvekarnikhil

src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.css

@@ -8,3 +8,19 @@
   margin-bottom: 0;
   list-style-type: none;
 }
+
+/*
+ * This padding sets alignment of the nested nodes.
+ */
+.example-tree .mat-nested-tree-node div[role=group] {
+  padding-left: 40px;
+}
+
+/*
+ * Padding for leaf nodes.
+ * Leaf nodes need to have padding so as to align with other non-leaf nodes
+ * under the same parent.
+ */
+.example-tree div[role=group] > .mat-tree-node {
+  padding-left: 40px;
+}

src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.html

@@ -1,15 +1,12 @@
 <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
   <!-- This is the tree node template for leaf nodes -->
+  <!-- There is inline padding applied to this node using styles.
+    This padding value depends on the mat-icon-button width. -->
   <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
-    <li class="mat-tree-node">
-      <!-- use a disabled button to provide padding for tree leaf -->
-      <button mat-icon-button disabled></button>
       {{node.name}}
-    </li>
   </mat-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
-    <li>
       <div class="mat-tree-node">
         <button mat-icon-button matTreeNodeToggle
                 [attr.aria-label]="'Toggle ' + node.name">
@@ -19,9 +16,11 @@
         </button>
         {{node.name}}
       </div>
-      <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
+      <!-- There is inline padding applied to this div using styles.
+          This padding value depends on the mat-icon-button width.  -->
+      <div [class.example-tree-invisible]="!treeControl.isExpanded(node)"
+          role="group">
         <ng-container matTreeNodeOutlet></ng-container>
-      </ul>
-    </li>
+    </div>
   </mat-nested-tree-node>
 </mat-tree>