diff --git a/src/aria/grid/grid.ts b/src/aria/grid/grid.ts index 3bbc4c7d0152..1d0e981ebe7e 100644 --- a/src/aria/grid/grid.ts +++ b/src/aria/grid/grid.ts @@ -20,6 +20,7 @@ import { model, Signal, } from '@angular/core'; +import {Directionality} from '@angular/cdk/bidi'; import {GridPattern, GridRowPattern, GridCellPattern, GridCellWidgetPattern} from '../private'; /** A directive that provides grid-based navigation and selection behavior. */ @@ -52,6 +53,9 @@ export class Grid { this._rows().map(r => r.pattern), ); + /** Text direction. */ + readonly textDirection = inject(Directionality).valueSignal; + /** The host native element. */ readonly element = computed(() => this._elementRef.nativeElement); diff --git a/src/aria/private/grid/grid.ts b/src/aria/private/grid/grid.ts index 6b944014bd29..ff429ac37ae3 100644 --- a/src/aria/private/grid/grid.ts +++ b/src/aria/private/grid/grid.ts @@ -21,6 +21,9 @@ export interface GridInputs extends Omit, 'c /** The rows that make up the grid. */ rows: SignalLike; + /** The direction that text is read based on the users locale. */ + textDirection: SignalLike<'rtl' | 'ltr'>; + /** A function that returns the grid cell associated with a given element. */ getCell: (e: Element) => GridCellPattern | undefined; } @@ -59,6 +62,16 @@ export class GridPattern { /** Whether the user is currently dragging to select a range of cells. */ readonly dragging = signal(false); + /** The key for navigating to the previous column. */ + readonly prevColKey = computed(() => + this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft', + ); + + /** The key for navigating to the next column. */ + readonly nextColKey = computed(() => + this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight', + ); + /** The keydown event manager for the grid. */ readonly keydown = computed(() => { const manager = new KeyboardEventManager(); @@ -70,8 +83,8 @@ export class GridPattern { manager .on('ArrowUp', () => this.gridBehavior.up()) .on('ArrowDown', () => this.gridBehavior.down()) - .on('ArrowLeft', () => this.gridBehavior.left()) - .on('ArrowRight', () => this.gridBehavior.right()) + .on(this.prevColKey(), () => this.gridBehavior.left()) + .on(this.nextColKey(), () => this.gridBehavior.right()) .on('Home', () => this.gridBehavior.firstInRow()) .on('End', () => this.gridBehavior.lastInRow()) .on([Modifier.Ctrl], 'Home', () => this.gridBehavior.first())