feat(aria/tree): adds tree-rtl-active-descendant-example to dev-app

Creates tree-rtl-active-descendant-example and adds it to the dev-app.

Author: essjay05

src/components-examples/aria/tree/index.ts

@@ -6,5 +6,6 @@ export {TreeDisabledSkippedExample} from './tree-disabled-skipped/tree-disabled-
 export {TreeMultiSelectExample} from './tree-multi-select/tree-multi-select-example';
 export {TreeMultiSelectFollowFocusExample} from './tree-multi-select-follow-focus/tree-multi-select-follow-focus-example';
 export {TreeNavExample} from './tree-nav/tree-nav-example';
+export {TreeRtlActiveDescendantExample} from './tree-rtl-active-descendant/tree-rtl-active-descendant-example';
 export {TreeSingleSelectExample} from './tree-single-select/tree-single-select-example';
 export {TreeSingleSelectFollowFocusExample} from './tree-single-select-follow-focus/tree-single-select-follow-focus-example';

src/components-examples/aria/tree/tree-common.css

@@ -44,6 +44,15 @@
   transform: rotate(90deg);
 }
 
+.example-tree[dir='rtl'] .example-tree-item .example-parent-icon {
+  transform: scaleX(-1);
+}
+
+.example-tree[dir='rtl'] .example-tree-item[aria-expanded='true'] .example-parent-icon {
+  transform: scaleX(-1) rotate(90deg);
+}
+
+
 .example-selected-icon {
   visibility: hidden;
   margin-left: auto;
@@ -57,3 +66,7 @@
 li[aria-expanded='false'] + ul[role='group'] {
   display: none;
 }
+
+.example-tree.ng-rtl {
+  background-color: red;
+}

src/components-examples/aria/tree/tree-rtl-active-descendant/tree-rtl-active-descendant-example.html

@@ -0,0 +1,35 @@
+<ul ngTree focusMode="activedescendant" #tree="ngTree" class="example-tree" dir="rtl">
+  <ng-template
+    [ngTemplateOutlet]="treeNodes"
+    [ngTemplateOutletContext]="{nodes: nodes, parent: tree}"
+  />
+</ul>
+
+<ng-template #treeNodes let-nodes="nodes" let-parent="parent">
+  @for (node of nodes; track node.value) {
+  <li
+    ngTreeItem
+    [parent]="parent"
+    [value]="node.value"
+    [label]="node.name"
+    [disabled]="node.disabled"
+    #treeItem="ngTreeItem"
+    class="example-tree-item example-selectable example-stateful"
+  >
+    <span aria-hidden="true" class="material-symbols-outlined example-parent-icon example-icon">{{node.children ? 'chevron_right' : ''}}</span>
+    <span aria-hidden="true" class="material-symbols-outlined example-icon">{{node.children ? 'folder' : 'docs'}}</span>
+    {{ node.name }}
+    <span aria-hidden="true" class="material-symbols-outlined example-selected-icon example-icon">check</span>
+  </li>
+
+  @if (node.children) {
+  <ul role="group">
+    <ng-template ngTreeItemGroup [ownedBy]="treeItem" #group="ngTreeItemGroup">
+      <ng-template
+        [ngTemplateOutlet]="treeNodes"
+        [ngTemplateOutletContext]="{nodes: node.children, parent: group}"
+      />
+    </ng-template>
+  </ul>
+  } }
+</ng-template>

src/components-examples/aria/tree/tree-rtl-active-descendant/tree-rtl-active-descendant-example.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {Component} from '@angular/core';
+import {NgTemplateOutlet} from '@angular/common';
+import {Tree, TreeItem, TreeItemGroup} from '@angular/aria/tree';
+import {TreeNode, NODES} from '../tree-data';
+
+/**
+ * @title Tree with active descendant focus.
+ */
+@Component({
+  selector: 'tree-rtl-active-descendant-example',
+  templateUrl: 'tree-rtl-active-descendant-example.html',
+  styleUrl: '../tree-common.css',
+  imports: [Tree, TreeItem, TreeItemGroup, NgTemplateOutlet],
+})
+export class TreeRtlActiveDescendantExample {
+  nodes: TreeNode[] = NODES;
+}

src/dev-app/aria-tree/tree-demo.html

@@ -44,6 +44,11 @@ <h2>Active Descendant</h2>
       <h2>Nav Mode</h2>
       <tree-nav-example></tree-nav-example>
     </div>
+
+    <div class="example-tree-container">
+      <h2>RTL Active Descendant</h2>
+      <tree-rtl-active-descendant-example></tree-rtl-active-descendant-example>
+    </div>
   </div>
 
   <div class="example-configurable-tree-container">

src/dev-app/aria-tree/tree-demo.ts

@@ -16,6 +16,7 @@ import {
   TreeMultiSelectExample,
   TreeMultiSelectFollowFocusExample,
   TreeNavExample,
+  TreeRtlActiveDescendantExample,
   TreeSingleSelectExample,
   TreeSingleSelectFollowFocusExample,
 } from '@angular/components-examples/aria/tree';
@@ -31,6 +32,7 @@ import {
     TreeMultiSelectExample,
     TreeMultiSelectFollowFocusExample,
     TreeNavExample,
+    TreeRtlActiveDescendantExample,
     TreeSingleSelectExample,
     TreeSingleSelectFollowFocusExample,
   ],