ionicons errors on typescript >= 4.4.x

[godenji]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Attempting to use Ionic 6 RC.0 with Angular 13 beta fails due to the latter requiring TypeScript >= 4.4.3.

Looking at the Ionic/Angular 6 package.json, some of the dependencies are quite out of date. It was my impression that moving forward Ionic was only going to support the last 2 major versions of Angular, which would mean the oldest supported version would be Angular 11, not Angular 8 as things currently stand.

Expected Behavior

That Ionic 6 supports TypeScript >= 4.4.3

Steps to Reproduce

Install Ionic 6 RC + Angular Beta

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Could you please reproduce this issue in an Ionic app and provide a link to the repo?

[godenji]

Repro repo

ionic serve stacktrace:

Build at: 2021-10-19T21:52:16.687Z - Hash: 4a7b8cfe14a274c8 - Time: 420ms
[ng]
[ng] Error: node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'.
[ng] Named property 'ariaHidden' of types 'IonIcon' and 'HTMLStencilElement' are not identical.
[ng]
[ng] 66 interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
[ng] ~~~~~~~~~~~~~~~~~~
[ng]
[ng]
[ng] Error: node_modules/ionicons/dist/types/components.d.ts:66:15 - error TS2320: Interface 'HTMLIonIconElement' cannot simultaneously extend types 'IonIcon' and 'HTMLStencilElement'.
[ng] Named property 'ariaLabel' of types 'IonIcon' and 'HTMLStencilElement' are not identical.
[ng]
[ng] 66 interface HTMLIonIconElement extends Components.IonIcon, HTMLStencilElement {
[ng] ~~~~~~~~~~~~~~~~~~
[ng]
[ng]
[ng] Error: node_modules/typescript/lib/lib.dom.d.ts:4632:101 - error TS2344: Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.
[ng] Type 'HTMLElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | ... 157 more ... | HTMLMarqueeElement' is not assignable to type 'Element'.
[ng] Type 'HTMLIonIconElement' is not assignable to type 'Element'.
[ng] Property 'ariaHidden' is optional in type 'HTMLIonIconElement' but required in type 'Element'.
[ng]
[ng] 4632 getElementsByTagName(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~
[ng]
[ng]
[ng] Error: node_modules/typescript/lib/lib.dom.d.ts:4953:101 - error TS2344: Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.
[ng] Type 'HTMLElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | ... 157 more ... | HTMLMarqueeElement' is not assignable to type 'Element'.
[ng]
[ng] 4953 getElementsByTagName(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;

[liamdebeasi]

Thanks! The issue here seems to be related to something in Ionicons, so I am going to move the issue to that repo.

[liamdebeasi]

Took a closer look and there are a few things at play here:

1. TypeScript changed the ARIA mixins to be of type string in TypeScript 4.4: Migrate latest dom types into libdom.d.ts  microsoft/TypeScript#44684. Previously properties like ariaHidden could be undefined. This change is what is causing the error noted in this thread.
2. There is confusion over whether or not these properties should accept null or undefined. According to the ARIA spec, using undefined or null is incorrect usage: ARIAMixin properties should be nullable? microsoft/TypeScript-DOM-lib-generator#1119 (comment). But there is a proposal to make these properties nullable again: Update IDL and enumerated attribute section w3c/aria#1611.
3. There is a mismatch between what the ARIA spec says and what browsers actually do. According to the spec, passing Element.ariaHidden = undefined should yield "undefined" (note this is a string not the actual undefined value): https://www.w3.org/TR/wai-aria-1.2/#example-16. However, browsers such as Chrome and Safari do not convert it to "undefined" currently.

---

Changing the ariaHidden and ariaLabel properties in the Ionicon component yields its own issue. Changing the prop from:

@Prop() ariaHidden?: string;

to:

@Prop() ariaHidden: string;

Will result in TypeScript errors in most applications as it now expects developers to explicitly set aria-hidden on each instance of <ion-icon>. This is not ideal as it is a big departure from what was previously expected of developers. Additionally, this usage does not align with working with HTML elements (I.e. you can omit aria-hidden).

---

To get developers unblocked, we plan to remove the ariaHidden and ariaLabel properties from the Ionicon component. This is a breaking change, so we will be releasing this update as ionicons@6.0.0.

While this is a breaking change, developer usage will not change there will be no change for most developers (see below). This is because these properties collide with properties of the same name on Element. In other words, developers will be able to continue to omit aria-hidden and aria-label from their <ion-icon> components.

That being said, ariaHidden was added as a result of #710, so we will need to find another solution to that issue before this update is shipped.

---

To summarize:

1. This issue is caused by things beyond the scope of Ionicons.
2. We will be shipping a fix in ionicons@6.0.0.
3. Despite this being a major release, there will be no change minimal changes (see below) to how developers use aria-hidden and aria-label on their <ion-icon> components.

Let me know if there are any questions. Thanks!

edit: We identified two use cases where there will be breaking changes:

1. Adding ARIA via JavaScript:

// Before
iconEl.ariaHidden = "true";

// After
iconEl.setAttribute('aria-hidden', 'true');

2. Using JSX in React:

{/* Before */}
<IonIcon ariaHidden="true" />

{/* After */}
<IonIcon aria-hidden="true" />

This change is more aligned with what React expects: https://reactjs.org/docs/accessibility.html#wai-aria

[olaisen81]

Hi @liamdebeasi, how to resolve this before the fix is released?

[liamdebeasi]

Add "skipLibCheck": true to your tsconfig.json file to resolve the error for now.

[olaisen81]

Great Liam, it works like a charm! Thanks.

[danielehrhardt]

Blocks Angular 13 upgrade

[hussainarthuna]

Add "skipLibCheck": true to your tsconfig.json file to resolve the error for now.

Thank you, that's great