bug: Detail Icon in RTL direction
See original GitHub issueBug Report
Detail icon for ion-item not working properly when using RTL after upgrading to the V5.6.1, whereas it was working perfectly and as expected with V5.6.0
Ionic version: [x] 5.x
Current behavior:
Currently the Icon points to the right even if the Application Direction is RTl.
Expected behavior:
The Icon should rotate and point towards left in RTL and should point towards right in LTR.
Steps to reproduce:
Related code:
insert short code snippets here
Other information:
Ionic info:
insert the output from ionic info here
Ionic:
Ionic CLI : 5.4.16
Ionic Framework : @ionic/angular 5.6.1
@angular-devkit/build-angular : 0.1102.5
@angular-devkit/schematics : 11.2.5
@angular/cli : 11.2.5
@ionic/angular-toolkit : 3.1.1
Capacitor:
Capacitor CLI : 2.4.7
@capacitor/core : 2.4.7
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.2, (and 14 other plugins)
Utility:
cordova-res (update available: 0.15.3) : 0.15.2
native-run (update available: 1.3.0) : 0.2.9
System:
NodeJS : v14.15.0 (/usr/local/bin/node)
npm : 7.6.3
OS : macOS
Xcode : Xcode 12.4 Build version 12D4e
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:8 (3 by maintainers)
Top Results From Across the Web
bug: Detail Icon in RTL direction · Issue #23078 - GitHub
The Icon should rotate and point towards left in RTL and should point towards right in LTR. Steps to reproduce: Related code: insert...
Read more >RTL Bugs - The Document Foundation Wiki
RTL language independent bugs. Such bugs should all be filed on The Document Foundation's bugzilla instance. There is a RTL-CTL Meta Bug ......
Read more >External link icons are not displayed for RTL in Monobook
"Fix" in this case means just get rid of the icons, instead of bothering to get them to display in the opposite direction....
Read more >Right-to-left Styling - RTL Styling 101
For some icons, though, it's important to flip their direction in RTL layouts, so that they can be clearly understood by the user....
Read more >[Fixed] Bug with RTL direction - voidtools forum
Thank you for the bug report. This crash is caused by the new search close/clear button when changing reading direction. Please try the...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hi everyone,
This fix has been released as part of Ionic Framework v5.6.2. Thanks for filing the issue!
Thanks for the issue. The problem was triggered by this commit: https://github.com/ionic-team/ionic-framework/commit/c877061a328c6ab6fa7248b9880d0205c6c4f6c1
When we set
aria-hidden="true"
onion-icon
, anaria-label
is never automatically generated. However,ion-icon
requires that a label is set in order for theflipRtl
property to work automatically: https://github.com/ionic-team/ionicons/blob/master/src/components/icon/icon.tsx#L158-L162As a result, automatic RTL switching broke because of this change. I will work on a fix.
Also need to investigate why our tests did not catch this, since it should have shown up in the screenshot diffs.