Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b4652eb

Browse files
authored
fix(aria/grid): rtl navigation (#32170)
1 parent 6b9decb commit b4652eb

File tree

2 files changed

+19
-2
lines changed

2 files changed

+19
-2
lines changed

‎src/aria/grid/grid.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
model,
2121
Signal,
2222
} from '@angular/core';
23+
import {Directionality} from '@angular/cdk/bidi';
2324
import {GridPattern, GridRowPattern, GridCellPattern, GridCellWidgetPattern} from '../private';
2425

2526
/** A directive that provides grid-based navigation and selection behavior. */
@@ -52,6 +53,9 @@ export class Grid {
5253
this._rows().map(r => r._pattern),
5354
);
5455

56+
/** Text direction. */
57+
readonly textDirection = inject(Directionality).valueSignal;
58+
5559
/** The host native element. */
5660
readonly element = computed(() => this._elementRef.nativeElement);
5761

‎src/aria/private/grid/grid.ts‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ export interface GridInputs extends Omit<GridBehaviorInputs<GridCellPattern>, 'c
2121
/** The rows that make up the grid. */
2222
rows: SignalLike<GridRowPattern[]>;
2323

24+
/** The direction that text is read based on the users locale. */
25+
textDirection: SignalLike<'rtl' | 'ltr'>;
26+
2427
/** A function that returns the grid cell associated with a given element. */
2528
getCell: (e: Element) => GridCellPattern | undefined;
2629
}
@@ -59,6 +62,16 @@ export class GridPattern {
5962
/** Whether the user is currently dragging to select a range of cells. */
6063
readonly dragging = signal(false);
6164

65+
/** The key for navigating to the previous column. */
66+
readonly prevColKey = computed(() =>
67+
this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft',
68+
);
69+
70+
/** The key for navigating to the next column. */
71+
readonly nextColKey = computed(() =>
72+
this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight',
73+
);
74+
6275
/** The keydown event manager for the grid. */
6376
readonly keydown = computed(() => {
6477
const manager = new KeyboardEventManager();
@@ -70,8 +83,8 @@ export class GridPattern {
7083
manager
7184
.on('ArrowUp', () => this.gridBehavior.up())
7285
.on('ArrowDown', () => this.gridBehavior.down())
73-
.on('ArrowLeft', () => this.gridBehavior.left())
74-
.on('ArrowRight', () => this.gridBehavior.right())
86+
.on(this.prevColKey(), () => this.gridBehavior.left())
87+
.on(this.nextColKey(), () => this.gridBehavior.right())
7588
.on('Home', () => this.gridBehavior.firstInRow())
7689
.on('End', () => this.gridBehavior.lastInRow())
7790
.on([Modifier.Ctrl], 'Home', () => this.gridBehavior.first())

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /