In RTL the 3rd Level arrows of links points to the right instead of pointing up, which causes un matching the LTR behavior.

Problem/Motivation

In languages where the dir is RTL, the chevron on expanded third-level navigation items does not point up, but rotates to the sideway.

LTR Pic:
LTR collapsed
LTR expanded

RTL Pic:
RTL before
RTL after

Steps to reproduce

1- Enable a language with RTL (for me it was arabic).
2- set the depth of one of the links block to 3 (In my case I made navigation_menu:admin into depth: 3 in navigation.block_layout).
3- Add a link under a second level link (for me it was under Structure › Display modes › Form modes).
4- Expand the links in the sidebar.

Proposed resolution

In core/modules/navigation/css/components/toolbar-menu.pcss.css, right in the style class of .toolbar-menu__chevron in rtl it is rotate: none. that style rotates the arrow to the right instead of up rotate: 270deg.

The compiled toolbar-menu.css has been regenerated to be:
[aria-expanded="true"] & {
rotate: -90deg;

[dir="rtl"] & {
rotate: 270deg;
}
}

Remaining tasks

- Fix the RTL chevron rotation for expanded third-level items: Done
- Manual testing in LTR and RTL: Done
- Open an MR and get CI passing: Done
- Review / RTBC

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

Issue fork drupal-3632334

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

m.shams created an issue. See original summary.

m.shams’s picture

Status: Active » Needs review
smustgrave’s picture

Status: Needs review » Needs work
Issue tags: +Needs issue summary update, +Needs screenshots

Summary is incomplete

Thanks

m.shams’s picture

Issue summary: View changes
StatusFileSize
new37.71 KB
new38.19 KB
new38.76 KB
new38.72 KB
m.shams’s picture

Status: Needs work » Needs review

I have completed the issue summary and added screenshots of the problem, they are taken from a new project.

Please review it when you have the time.

Thanks

ishfaqafridi85’s picture

Issue tags: -Needs screenshots

Tested the proposed CSS change on Drupal 12.0-dev with Claro. Before the fix, the expanded arrow points sideways in RTL. After the fix, it points up when expanded and down when collapsed. English behaviour is unchanged, and keyboard toggling still works.

Before: expanded arrow points sideways in RTL

After: expanded arrow points upwards in RTL

Could you also complete the proposed resolution and remaining tasks, and i Keeping this in Needs review as the fix works in testing; please open an MR from the existing branch so CI can run.

m.shams’s picture

Issue summary: View changes

m.shams’s picture

Issue summary: View changes
m.shams’s picture

Completed the proposed resolution and remaining tasks, and I have opened an MR from the existing branch and ran CI.
Thank you for review.