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

Creates tree nav rtl example and adds as a demo to dev-app.

Author: essjay05

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 {TreeNavRtlExample} from './tree-nav-rtl/tree-nav-rtl-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-nav-rtl/tree-nav-rtl-example.html

@@ -0,0 +1,49 @@
+<ul ngTree [nav]="true" dir="rtl" #tree="ngTree" class="example-tree">
+  <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) {
+    <a
+      ngTreeItem
+      [parent]="parent"
+      [value]="node.value"
+      [label]="node.name"
+      [disabled]="node.disabled"
+      [selectable]="!node.children"
+      #treeItem="ngTreeItem"
+      class="example-tree-item example-selectable example-stateful"
+      href="#{{ node.name }}"
+      (click)="$event.preventDefault()"
+    >
+      <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
+      >
+    </a>
+
+    @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-nav-rtl/tree-nav-rtl-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 nav mode.
+ */
+@Component({
+  selector: 'tree-nav-rtl-example',
+  templateUrl: 'tree-nav-rtl-example.html',
+  styleUrl: '../tree-common.css',
+  imports: [Dir, Tree, TreeItem, TreeItemGroup, NgTemplateOutlet],
+})
+export class TreeNavRtlExample {
+  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 Nav Mode</h2>
+      <tree-nav-rtl-example></tree-nav-rtl-example>
+    </div>
   </div>
 
   <div class="example-configurable-tree-container">

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

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