Repository navigation
aria properties can no longer be undefined in TypeScript 4.4+ #46554
Description
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
💻 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.
Activity
liamdebeasi commentedon Oct 27, 2021
I think this PR resulted in this behavior change: #44684
Going to test a change locally and will submit a new PR.
liamdebeasi commentedon Oct 27, 2021
Interestingly,
ariaExpandedcan be the string"undefined"(https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaExpanded) whileariaHiddencan beundefined(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 commentedon Oct 27, 2021
Any PR regarding the DOM lib should be done in https://github.com/microsoft/TypeScript-DOM-lib-generator/.
liamdebeasi commentedon Oct 27, 2021
Thanks! I did not know that existed. Looks like there is a similar discussion going on at microsoft/TypeScript-DOM-lib-generator#1119.
liamdebeasi commentedon Oct 27, 2021
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 commentedon Oct 27, 2021
Maybe I've misunderstood something, but it looks like none of these definitions are sufficient - by default, a DOM node has
ariaHiddenset tonull(notundefinedand not missing), so maybe MDN is off too?liamdebeasi commentedon Oct 27, 2021
Daniel Rosenwasser (@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
ariaHiddenseems to vary based on the browser you use:Chrome:
nullSafari:
nullFirefox:
undefined