Skip to content

ngb-rating does not reverse arrow key navigation in RTL mode #4827

@RandAldurayhim

Description

@RandAldurayhim

When using <ngb-rating> in an RTL layout (e.g., with dir="rtl" on the container or the HTML tag), the keyboard navigation still uses LTR logic --- ArrowRight increases the rating, and ArrowLeft decreases it.

Expected behavior:
In RTL mode, ArrowLeft should increase the rating (i.e., move forward visually), and ArrowRight should decrease it.

Steps to reproduce:

  1. Wrap <ngb-rating> in a container with dir="rtl" (or set the document direction).

  2. Use the keyboard to interact with the rating using left/right arrow keys.

  3. Observe that the keys do not respect RTL expectations.

Why this matters:
This affects usability and accessibility for RTL users, and breaks intuitive keyboard navigation.

Suggested fix:
The rating component should check the computed text direction (e.g., via getComputedStyle(element).direction) and reverse the arrow logic accordingly.

Version:
ng-bootstrap version: 15.0.1Angular version:16.1.2`

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions