fix(): adding aria-hidden no longer disables automatic rtl switching (#954)

Author: liamdebeasi

package-lock.json

@@ -24,7 +24,7 @@
     "version": "npm run build"
   },
   "dependencies": {
-    "@stencil/core": "^2.4.0"
+    "@stencil/core": "^2.5.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.6",

package.json

@@ -10,6 +10,7 @@ import { getName, getUrl } from './utils';
 })
 export class Icon {
   private io?: IntersectionObserver;
+  private iconName: string | null = null;
 
   @Element() el!: HTMLElement;
 
@@ -143,8 +144,9 @@ export class Icon {
       }
     }
 
+    const label = this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md);
+
     if (!this.ariaLabel && this.ariaHidden !== 'true') {
-      const label = getName(this.name, this.icon, this.mode, this.ios, this.md);
       // user did not provide a label
       // come up with the label based on the icon name
       if (label) {
@@ -154,11 +156,12 @@ export class Icon {
   }
 
   render() {
+    const { iconName } = this;
     const mode = this.mode || 'md';
     const flipRtl =
       this.flipRtl ||
-      (this.ariaLabel &&
-        (this.ariaLabel.indexOf('arrow') > -1 || this.ariaLabel.indexOf('chevron') > -1) &&
+      (iconName &&
+        (iconName.indexOf('arrow') > -1 || iconName.indexOf('chevron') > -1) &&
         this.flipRtl !== false);
 
     return (

src/components/icon/icon.tsx

@@ -29,4 +29,20 @@ describe('icon', () => {
       </ion-icon>
     `);
   });
+
+  it('renders rtl with aria-hidden', async () => {
+    const { root } = await newSpecPage({
+      components: [Icon],
+      direction: 'rtl',
+      html: `<ion-icon name="chevron-forward" aria-hidden="true"></ion-icon>`,
+    });
+
+    expect(root).toEqualHtml(`
+      <ion-icon class="md flip-rtl" name="chevron-forward" role="img" aria-hidden="true">
+        <mock:shadow-root>
+          <div class="icon-inner"></div>
+        </mock:shadow-root>
+      </ion-icon>
+    `);
+  });
 });