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..a6ea2a7d3c61 100644 --- a/src/components-examples/aria/tree/tree-common.css +++ b/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; 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 @@ + + + + @for (node of nodes; track node.value) { +
  • + + + {{ node.name }} + +
  • + + @if (node.children) { + + } } +
    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 @@

    Active Descendant

    Nav Mode

    + +
    +

    RTL Active Descendant

    + +
    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, ],