question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: Detail Icon in RTL direction

See original GitHub issue

Bug 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:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
liamdebeasicommented, Mar 22, 2021

Hi everyone,

This fix has been released as part of Ionic Framework v5.6.2. Thanks for filing the issue!

1reaction
liamdebeasicommented, Mar 22, 2021

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" on ion-icon, an aria-label is never automatically generated. However, ion-icon requires that a label is set in order for the flipRtl property to work automatically: https://github.com/ionic-team/ionicons/blob/master/src/components/icon/icon.tsx#L158-L162

As 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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found