Adds aria tree rtl active descendant example to dev-app

src/aria/private/tree/tree.ts

@@ -168,6 +168,9 @@ export interface TreeInputs<V> extends Omit<ListInputs<TreeItemPattern<V>, V>, '
 
   /** The aria-current type. */
   currentType: SignalLike<'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'>;
+
+  /** The text direction of the tree. */
+  textDirection: SignalLike<'ltr' | 'rtl'>;
 }
 
 export interface TreePattern<V> extends TreeInputs<V> {}
@@ -226,15 +229,17 @@ export class TreePattern<V> {
     if (this.inputs.orientation() === 'horizontal') {
       return 'ArrowUp';
     }
-    return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+    const isRtl = this.inputs.textDirection() === 'rtl';
+    return isRtl ? 'ArrowRight' : 'ArrowLeft';
   });
 
   /** The key for expanding an item or moving to its first child. */
   readonly expandKey = computed(() => {
     if (this.inputs.orientation() === 'horizontal') {
       return 'ArrowDown';
     }
-    return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+    const isRtl = this.inputs.textDirection() === 'rtl';
+    return isRtl ? 'ArrowLeft' : 'ArrowRight';
   });
 
   /** Represents the space key. Does nothing when the user is actively using typeahead. */
@@ -360,9 +365,6 @@ export class TreePattern<V> {
   /** The orientation of the tree. */
   orientation: SignalLike<'vertical' | 'horizontal'>;
 
-  /** The text direction of the tree. */
-  textDirection: SignalLike<'ltr' | 'rtl'>;
-
   /** Whether multiple items can be selected at the same time. */
   multi: SignalLike<boolean>;
 
@@ -386,7 +388,6 @@ export class TreePattern<V> {
     this.softDisabled = inputs.softDisabled;
     this.wrap = inputs.wrap;
     this.orientation = inputs.orientation;
-    this.textDirection = inputs.textDirection;
     this.multi = computed(() => (this.nav() ? false : this.inputs.multi()));
     this.selectionMode = inputs.selectionMode;
     this.typeaheadDelay = inputs.typeaheadDelay;

src/aria/tree/tree.ts

@@ -22,6 +22,7 @@ import {
   untracked,
   afterNextRender,
 } from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
 import {_IdGenerator} from '@angular/cdk/a11y';
 import {Directionality} from '@angular/cdk/bidi';
 import {
@@ -131,8 +132,13 @@ export class Tree<V> {
   /** Selected item values. */
   readonly value = model<V[]>([]);
 
+  /** The directionality (LTR / RTL) context for the application. */
+  private readonly _directionality = inject(Directionality);
+
   /** Text direction. */
-  readonly textDirection = inject(Directionality).valueSignal;
+  readonly textDirection = toSignal(this._directionality.change, {
+    initialValue: this._directionality.value,
+  });
 
   /** Whether the tree is in navigation mode. */
   readonly nav = input(false);
@@ -158,6 +164,7 @@ export class Tree<V> {
       activeItem: signal<TreeItemPattern<V> | undefined>(undefined),
       element: () => this._elementRef.nativeElement,
       combobox: () => this._popup?.combobox?._pattern,
+      textDirection: this.textDirection,
     };
 
     this._pattern = this._popup?.combobox

src/components-examples/aria/tree/BUILD.bazel

@@ -14,6 +14,7 @@ ng_project(
         "//:node_modules/@angular/core",
         "//:node_modules/@angular/forms",
         "//src/aria/tree",
+        "//src/cdk/a11y",
         "//src/material/checkbox",
         "//src/material/form-field",
         "//src/material/icon",

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,14 @@
   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;

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,26 @@
+/**
+ * @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 {Dir} from '@angular/cdk/bidi';
+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: [Dir, 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,
   ],