aria properties can no longer be undefined in TypeScript 4.4+

[liamdebeasi]

Bug Report

🔎 Search Terms

4.4 aria
aria property
aria undefined

🕗 Version & Regression Information

• This changed between versions 4.3.5 and 4.4.4

⏯ Playground Link

https://www.typescriptlang.org/play?ts=4.4.4#code/JYOwLgpgTgZghgYwgAgLIE8DCBbADsiAD0hABMBnZAUQBsJsJxkBvAWAChkvk4pg4AEsFKlGAfgBcycmD4gA5gG4OAXyA

💻 Code

interface MyCmp extends Element {
  ariaHidden?: string;
}

🙁 Actual behavior

TypeScript 4.4 says this is invalid usage:

Interface 'MyCmp' incorrectly extends interface 'Element'.
  Types of property 'ariaHidden' are incompatible.
    Type 'string | undefined' is not assignable to type 'string'.
      Type 'undefined' is not assignable to type 'string'.

🙂 Expected behavior

I would expect this to compile without any errors. According to both MDN and the W3C ARIA Spec, ARIA properties such as ariaHidden can be 'true' | 'false' | undefined.

[liamdebeasi]

I think this PR resulted in this behavior change: #44684

Going to test a change locally and will submit a new PR.

[liamdebeasi]

Interestingly, ariaExpanded can be the string "undefined" (https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaExpanded) while ariaHidden can be undefined (the actual value, not the string) (https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaHidden). Whether that is intentional or a typo, I do not really know.

[MartinJohns]

Any PR regarding the DOM lib should be done in https://github.com/microsoft/TypeScript-DOM-lib-generator/.

[liamdebeasi]

Thanks! I did not know that existed. Looks like there is a similar discussion going on at microsoft/TypeScript-DOM-lib-generator#1119.

[liamdebeasi]

Ok looking into the issue in microsoft/TypeScript-DOM-lib-generator#1119 a bit more, I do not think this is a bug in TypeScript. The root issue here seems to be a mismatch between what the ARIA spec says and what the browsers actually do.

It sounds like the behavior may change in the future according to microsoft/TypeScript-DOM-lib-generator#1119 (comment), but for now TypeScript's types for the aria properties are technically correct.

This behavior change impacts Ionicons (ionic-team/ionicons#1011), but I think I am going to change the ariaHidden and ariaLabel properties on the icon component to always expect a value for now.

I am going to close this out. Thanks!

[DanielRosenwasser]

Maybe I've misunderstood something, but it looks like none of these definitions are sufficient - by default, a DOM node has ariaHidden set to null (not undefined and not missing), so maybe MDN is off too?

> document.createElement("div").ariaHidden
null
> "ariaHidden" in document.createElement("div")
true

[liamdebeasi]

@DanielRosenwasser I think that's part of the problem. What the browsers do and what MDN says is different from what the spec wants. The initial value of ariaHidden seems to vary based on the browser you use:

document.createElement('div').ariaHidden

Chrome: null
Safari: null
Firefox: undefined