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: '',
+ });
+ expect(root).toEqualHtml(`
+
+
+
+
+
+ `);
+ });
+
+ it('renders aria-hidden and no aria-label', async () => {
+ const { root } = await newSpecPage({
+ components: [Icon],
+ html: ``,
+ });
+ expect(root).toEqualHtml(`
+
+
+
+
+
+ `);
+ });
+});
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 @@ Custom CSS
+ Aria
+
+
+
+
RTL
Default: Non-arrows