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:


RTL Pic:


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
| Comment | File | Size | Author |
|---|---|---|---|
| #4 | 3632334-rtl-before.png | 38.72 KB | m.shams |
| #4 | 3632334-rtl-after.png | 38.76 KB | m.shams |
| #4 | 3632334-ltr-expanded.png | 38.19 KB | m.shams |
| #4 | 3632334-ltr-collapsed.png | 37.71 KB | m.shams |
Issue fork drupal-3632334
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
Comment #2
m.shams commentedComment #3
smustgrave commentedSummary is incomplete
Thanks
Comment #4
m.shams commentedComment #5
m.shams commentedI 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
Comment #6
ishfaqafridi85 commentedTested 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.
Comment #7
m.shams commentedComment #9
m.shams commentedComment #10
m.shams commentedCompleted the proposed resolution and remaining tasks, and I have opened an MR from the existing branch and ran CI.
Thank you for review.