From 9e257a9653b37c36d6cfcba78fe0603f2d68d6b5 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Tue, 28 Oct 2025 22:03:37 +0000
Subject: [PATCH 1/3] 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.
---
 src/components-examples/aria/tree/index.ts    |  1 +
 .../aria/tree/tree-common.css                 | 13 +++++++
 .../tree-rtl-active-descendant-example.html   | 35 +++++++++++++++++++
 .../tree-rtl-active-descendant-example.ts     | 25 +++++++++++++
 src/dev-app/aria-tree/tree-demo.html          |  5 +++
 src/dev-app/aria-tree/tree-demo.ts            |  2 ++
 6 files changed, 81 insertions(+)
 create mode 100644 src/components-examples/aria/tree/tree-rtl-active-descendant/tree-rtl-active-descendant-example.html
 create mode 100644 src/components-examples/aria/tree/tree-rtl-active-descendant/tree-rtl-active-descendant-example.ts

diff --git a/src/components-examples/aria/tree/index.ts b/src/components-examples/aria/tree/index.ts
index d017046af3c0..04196c49716e 100644
--- a/src/components-examples/aria/tree/index.ts
+++ b/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';
diff --git a/src/components-examples/aria/tree/tree-common.css b/src/components-examples/aria/tree/tree-common.css
index 643fb5ab385d..0d0b36560928 100644
--- a/src/components-examples/aria/tree/tree-common.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components-examples/aria/tree/tree-rtl-active-descendant/tree-rtl-active-descendant-example.html b/src/components-examples/aria/tree/tree-rtl-active-descendant/tree-rtl-active-descendant-example.html
new file mode 100644
index 000000000000..26641b1251ab
--- /dev/null
+++ b/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>
diff --git a/src/components-examples/aria/tree/tree-rtl-active-descendant/tree-rtl-active-descendant-example.ts b/src/components-examples/aria/tree/tree-rtl-active-descendant/tree-rtl-active-descendant-example.ts
new file mode 100644
index 000000000000..0e9032253f9c
--- /dev/null
+++ b/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;
+}
diff --git a/src/dev-app/aria-tree/tree-demo.html b/src/dev-app/aria-tree/tree-demo.html
index 3003bb1817ea..28c8773983b2 100644
--- a/src/dev-app/aria-tree/tree-demo.html
+++ b/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">
diff --git a/src/dev-app/aria-tree/tree-demo.ts b/src/dev-app/aria-tree/tree-demo.ts
index 9807633d0653..3706433648a0 100644
--- a/src/dev-app/aria-tree/tree-demo.ts
+++ b/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,
   ],

From 5db81b6de244089ae65f9ce40f900390671dc2df Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Tue, 28 Oct 2025 22:05:39 +0000
Subject: [PATCH 2/3] refactor(aria/tree): removes random test styles

Updates to remove unnecessary styles.
---
 src/components-examples/aria/tree/tree-common.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components-examples/aria/tree/tree-common.css b/src/components-examples/aria/tree/tree-common.css
index 0d0b36560928..a14817f8d1d0 100644
--- a/src/components-examples/aria/tree/tree-common.css
+++ b/src/components-examples/aria/tree/tree-common.css
@@ -66,7 +66,3 @@
 li[aria-expanded='false'] + ul[role='group'] {
   display: none;
 }
-
-.example-tree.ng-rtl {
-  background-color: red;
-}
\ No newline at end of file

From 384b816616710f6733fa5cdc1fba3307ccd662f0 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Tue, 28 Oct 2025 22:07:06 +0000
Subject: [PATCH 3/3] refactor(aria/tree): removes unnecessary space

Updates stylesheet to remove unnecessary spacing.
---
 src/components-examples/aria/tree/tree-common.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components-examples/aria/tree/tree-common.css b/src/components-examples/aria/tree/tree-common.css
index a14817f8d1d0..a6ea2a7d3c61 100644
--- a/src/components-examples/aria/tree/tree-common.css
+++ b/src/components-examples/aria/tree/tree-common.css
@@ -52,7 +52,6 @@
   transform: scaleX(-1) rotate(90deg);
 }
 
-
 .example-selected-icon {
   visibility: hidden;
   margin-left: auto;