merge feature-7.0

Feature 7.0

CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.0.0](https://github.com/ionic-team/ionicons/compare/v6.1.3...v7.0.0) (2023-03-07)
+
+**Migration Note:** Developers should ensure that their `<ion-icon>` usages have either `aria-label` or `aria-hidden` to avoid accessibility issues. See https://ionic.io/ionicons/usage for more information.
+
+### Bug Fixes
+
+* **icon:** remove auto-generated aria-label ([#1170](https://github.com/ionic-team/ionicons/issues/1170)) ([98975ec](https://github.com/ionic-team/ionicons/commit/98975ec0f54b825c33f528683834a5e38298d598))
+
+
+
+
 ## [6.1.3](https://github.com/ionic-team/ionicons/compare/v6.1.2...v6.1.3) (2023-02-09)
 
 

lerna.json

@@ -2,5 +2,5 @@
   "packages": [
     "./"
   ],
-  "version": "6.1.3"
+  "version": "7.0.0"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionicons",
-  "version": "6.1.3",
+  "version": "7.0.0",
   "description": "Premium icons for Ionic.",
   "files": [
     "components/",

src/components/icon/icon.tsx

@@ -17,7 +17,6 @@ export class Icon {
 
   @State() private svgContent?: string;
   @State() private isVisible = false;
-  @State() private ariaLabel?: string;
 
   /**
    * The mode determines which platform styles to use.
@@ -123,12 +122,6 @@ export class Icon {
     }
   }
 
-  private hasAriaHidden = () => {
-    const { el } = this;
-
-    return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';
-  };
-
   @Watch('name')
   @Watch('src')
   @Watch('icon')
@@ -149,34 +142,18 @@ 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>
-    `);
-  });
 });