From 1b1780de8dd82244e0d0866387653bd3ce14e26a Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 14 Aug 2020 08:59:33 +0200
Subject: [PATCH] feat: supports aria-hidden

---
 src/components.d.ts                   |  2 ++
 src/components/icon/icon.tsx          |  4 +++-
 src/components/icon/readme.md         | 27 +++++++++++-----------
 src/components/icon/test/icon.spec.ts | 32 +++++++++++++++++++++++++++
 src/index.html                        |  5 +++++
 5 files changed, 56 insertions(+), 14 deletions(-)
 create mode 100644 src/components/icon/test/icon.spec.ts

diff --git a/src/components.d.ts b/src/components.d.ts
index dbdd9ed49..e71f74f1a 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -7,6 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
     interface IonIcon {
+        "ariaHidden"?: string;
         /**
           * Specifies the label to use for accessibility. Defaults to the icon name.
          */
@@ -66,6 +67,7 @@ declare global {
 }
 declare namespace LocalJSX {
     interface IonIcon {
+        "ariaHidden"?: string;
         /**
           * Specifies the label to use for accessibility. Defaults to the icon name.
          */
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 5e78176ba..6d23a2ce6 100755
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -32,6 +32,8 @@ export class Icon {
    */
   @Prop({ mutable: true, reflectToAttr: true }) ariaLabel?: string;
 
+  @Prop({reflect: true}) ariaHidden?: string;
+
   /**
    * Specifies which icon to use on `ios` mode.
    */
@@ -130,7 +132,7 @@ export class Icon {
       }
     }
 
-    if (!this.ariaLabel) {
+    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
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index 1d87bc6b2..87028f008 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -7,19 +7,20 @@
 
 ## Properties
 
-| Property    | Attribute    | Description                                                                                                                                                                    | Type                   | Default        |
-| ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | -------------- |
-| `ariaLabel` | `aria-label` | Specifies the label to use for accessibility. Defaults to the icon name.                                                                                                       | `string \| undefined`  | `undefined`    |
-| `color`     | `color`      | The color to use for the background of the item.                                                                                                                               | `string \| undefined`  | `undefined`    |
-| `flipRtl`   | `flip-rtl`   | Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.                                                                                                     | `boolean \| undefined` | `undefined`    |
-| `icon`      | `icon`       | A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property. | `any`                  | `undefined`    |
-| `ios`       | `ios`        | Specifies which icon to use on `ios` mode.                                                                                                                                     | `string \| undefined`  | `undefined`    |
-| `lazy`      | `lazy`       | If enabled, ion-icon will be loaded lazily when it's visible in the viewport. Default, `false`.                                                                                | `boolean`              | `false`        |
-| `md`        | `md`         | Specifies which icon to use on `md` mode.                                                                                                                                      | `string \| undefined`  | `undefined`    |
-| `mode`      | `mode`       | The mode determines which platform styles to use.                                                                                                                              | `string`               | `getIonMode()` |
-| `name`      | `name`       | Specifies which icon to use from the built-in set of icons.                                                                                                                    | `string \| undefined`  | `undefined`    |
-| `size`      | `size`       | The size of the icon. Available options are: `"small"` and `"large"`.                                                                                                          | `string \| undefined`  | `undefined`    |
-| `src`       | `src`        | Specifies the exact `src` of an SVG file to use.                                                                                                                               | `string \| undefined`  | `undefined`    |
+| Property     | Attribute     | Description                                                                                                                                                                    | Type                   | Default        |
+| ------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | -------------- |
+| `ariaHidden` | `aria-hidden` | Set the icon to hidden, respectively `true`, to remove it from the accessibility tree.                                                                                         | `string \| undefined`  | `undefined`    |
+| `ariaLabel`  | `aria-label`  | Specifies the label to use for accessibility. Defaults to the icon name.                                                                                                       | `string \| undefined`  | `undefined`    |
+| `color`      | `color`       | The color to use for the background of the item.                                                                                                                               | `string \| undefined`  | `undefined`    |
+| `flipRtl`    | `flip-rtl`    | Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.                                                                                                     | `boolean \| undefined` | `undefined`    |
+| `icon`       | `icon`        | A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property. | `any`                  | `undefined`    |
+| `ios`        | `ios`         | Specifies which icon to use on `ios` mode.                                                                                                                                     | `string \| undefined`  | `undefined`    |
+| `lazy`       | `lazy`        | If enabled, ion-icon will be loaded lazily when it's visible in the viewport. Default, `false`.                                                                                | `boolean`              | `false`        |
+| `md`         | `md`          | Specifies which icon to use on `md` mode.                                                                                                                                      | `string \| undefined`  | `undefined`    |
+| `mode`       | `mode`        | The mode determines which platform styles to use.                                                                                                                              | `string`               | `getIonMode()` |
+| `name`       | `name`        | Specifies which icon to use from the built-in set of icons.                                                                                                                    | `string \| undefined`  | `undefined`    |
+| `size`       | `size`        | The size of the icon. Available options are: `"small"` and `"large"`.                                                                                                          | `string \| undefined`  | `undefined`    |
+| `src`        | `src`         | Specifies the exact `src` of an SVG file to use.                                                                                                                               | `string \| undefined`  | `undefined`    |
 
 
 ----------------------------------------------
diff --git a/src/components/icon/test/icon.spec.ts b/src/components/icon/test/icon.spec.ts
new file mode 100644
index 000000000..657e68076
--- /dev/null
+++ b/src/components/icon/test/icon.spec.ts
@@ -0,0 +1,32 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { Icon } from '../icon';
+
+describe('icon', () => {
+  it('renders', async () => {
+    const { root } = await newSpecPage({
+      components: [Icon],
+      html: '<ion-icon></ion-icon>',
+    });
+    expect(root).toEqualHtml(`
+      <ion-icon class="md" role="img">
+        <mock:shadow-root>
+          <div class="icon-inner"></div>
+        </mock:shadow-root>
+      </ion-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>
+    `);
+  });
+});
diff --git a/src/index.html b/src/index.html
index b694e90a9..926a455be 100644
--- a/src/index.html
+++ b/src/index.html
@@ -83,6 +83,11 @@ <h2>Custom CSS</h2>
   <ion-icon class="custom" src="./assets/web_asset.svg"></ion-icon>
   <ion-icon class="custom" src="./assets/work_outline.svg"></ion-icon>
 
+  <h2>Aria</h2>
+  <ion-icon name="cellular"></ion-icon>
+  <ion-icon name="cellular" aria-label="Mobile data"></ion-icon>
+  <ion-icon name="cellular" aria-hidden="true"></ion-icon>
+
   <h1>RTL</h1>
 
   <h2>Default: Non-arrows</h2>