fix(icon): remove auto-generated aria-label (#1170)

Author: averyjohnston

src/components/icon/icon.tsx

@@ -19,7 +19,6 @@ export class Icon {
 
   @State() private svgContent?: string;
   @State() private isVisible = false;
-  @State() private ariaLabel?: string;
 
   /**
    * The mode determines which platform styles to use.
@@ -124,12 +123,6 @@ export class Icon {
       cb();
     }
   }
-  
-  private hasAriaHidden = () => {
-    const { el } = this;
-    
-    return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';
-  }
 
   @Watch('name')
   @Watch('src')
@@ -164,36 +157,20 @@ export class Icon {
       }
     }
 
-    const label = this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md);
-
-    /**
-     * Come up with a default label
-     * in case user does not provide their own.
-     */
-    if (label) {
-      this.ariaLabel = label.replace(/\-/g, ' ');
-    }
+    this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md);
   }
 
   render() {
-    const { iconName, ariaLabel, el, inheritedAttributes } = this;
+    const { iconName, el, inheritedAttributes } = this;
     const mode = this.mode || 'md';
     const flipRtl =
       this.flipRtl ||
       (iconName &&
         (iconName.indexOf('arrow') > -1 || iconName.indexOf('chevron') > -1) &&
         this.flipRtl !== false);
 
-    /**
-     * Only set the aria-label if a) we have generated
-     * one for the icon and if aria-hidden is not set to "true".
-     * If developer wants to set their own aria-label, then
-     * inheritedAttributes down below will override whatever
-     * default label we have set.
-     */
     return (
       <Host
-        aria-label={ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null}
         role="img"
         class={{
           [mode]: true,

src/components/icon/test/icon.spec.ts

@@ -16,20 +16,6 @@ describe('icon', () => {
     `);
   });
 
-  it('renders aria-hidden and no aria-label', async () => {
-    const { root } = await newSpecPage({
-      components: [Icon],
-      html: `<ion-icon aria-hidden="true"></ion-icon>`,
-    });
-    expect(root).toEqualHtml(`
-      <ion-icon class="md" role="img" aria-hidden="true">
-        <mock:shadow-root>
-          <div class="icon-inner"></div>
-        </mock:shadow-root>
-      </ion-icon>
-    `);
-  });
-
   it('renders rtl with aria-hidden', async () => {
     const { root } = await newSpecPage({
       components: [Icon],
@@ -46,21 +32,6 @@ describe('icon', () => {
     `);
   });
 
-  it('renders default aria-label', async () => {
-    const { root } = await newSpecPage({
-      components: [Icon],
-      html: `<ion-icon name="chevron-forward"></ion-icon>`,
-    });
-
-    expect(root).toEqualHtml(`
-      <ion-icon class="md" name="chevron-forward" role="img" aria-label="chevron forward">
-        <mock:shadow-root>
-          <div class="icon-inner"></div>
-        </mock:shadow-root>
-      </ion-icon>
-    `);
-  });
-  
   it('renders custom aria-label', async () => {
     const { root } = await newSpecPage({
       components: [Icon],
@@ -105,34 +76,4 @@ describe('icon', () => {
       </ion-icon>
     `);
   });
-  
-  it('renders default label after changing source', async () => {
-    const page = await newSpecPage({
-      components: [Icon],
-      html: `<ion-icon name="chevron-forward"></ion-icon>`,
-    });
-    
-    const icon = page.root;
-
-    expect(icon).toEqualHtml(`
-      <ion-icon class="md" name="chevron-forward" role="img" aria-label="chevron forward">
-        <mock:shadow-root>
-          <div class="icon-inner"></div>
-        </mock:shadow-root>
-      </ion-icon>
-    `);
-    
-    if (icon) {
-      icon.name = 'trash';
-    }
-    await page.waitForChanges();
-
-    expect(icon).toEqualHtml(`
-      <ion-icon class="md" name="trash" role="img" aria-label="trash">
-        <mock:shadow-root>
-          <div class="icon-inner"></div>
-        </mock:shadow-root>
-      </ion-icon>
-    `);
-  });
 });