fix(engine-core): revert ARIA fix and release v5.0.5 (#3935)

This reverts commit f8732a1 and releases v5.0.5

package.json

@@ -1,6 +1,6 @@
 {
     "name": "lwc-monorepo",
-    "version": "5.0.4",
+    "version": "5.0.5",
     "private": true,
     "description": "Lightning Web Components",
     "repository": {

packages/@lwc/aria-reflection/package.json

@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/aria-reflection",
-    "version": "5.0.4",
+    "version": "5.0.5",
     "description": "ARIA element reflection polyfill for strings",
     "keywords": [
         "aom",

packages/@lwc/babel-plugin-component/package.json

@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/babel-plugin-component",
-    "version": "5.0.4",
+    "version": "5.0.5",
     "description": "Babel plugin to transform a LWC module",
     "keywords": [
         "lwc"
@@ -43,8 +43,8 @@
     },
     "dependencies": {
         "@babel/helper-module-imports": "7.22.15",
-        "@lwc/errors": "5.0.4",
-        "@lwc/shared": "5.0.4",
+        "@lwc/errors": "5.0.5",
+        "@lwc/shared": "5.0.5",
         "line-column": "~1.0.2"
     },
     "devDependencies": {

packages/@lwc/compiler/package.json

@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/compiler",
-    "version": "5.0.4",
+    "version": "5.0.5",
     "description": "LWC compiler",
     "keywords": [
         "lwc"
@@ -48,10 +48,10 @@
         "@babel/plugin-proposal-object-rest-spread": "7.20.7",
         "@babel/plugin-transform-async-to-generator": "7.23.3",
         "@locker/babel-plugin-transform-unforgeables": "0.20.0",
-        "@lwc/babel-plugin-component": "5.0.4",
-        "@lwc/errors": "5.0.4",
-        "@lwc/shared": "5.0.4",
-        "@lwc/style-compiler": "5.0.4",
-        "@lwc/template-compiler": "5.0.4"
+        "@lwc/babel-plugin-component": "5.0.5",
+        "@lwc/errors": "5.0.5",
+        "@lwc/shared": "5.0.5",
+        "@lwc/style-compiler": "5.0.5",
+        "@lwc/template-compiler": "5.0.5"
     }
 }

packages/@lwc/engine-core/package.json

@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/engine-core",
-    "version": "5.0.4",
+    "version": "5.0.5",
     "description": "Core LWC engine APIs.",
     "keywords": [
         "lwc"
@@ -42,8 +42,8 @@
         }
     },
     "dependencies": {
-        "@lwc/features": "5.0.4",
-        "@lwc/shared": "5.0.4"
+        "@lwc/features": "5.0.5",
+        "@lwc/shared": "5.0.5"
     },
     "devDependencies": {
         "observable-membrane": "2.0.0"

packages/@lwc/engine-core/src/framework/base-bridge-element.ts

@@ -23,7 +23,7 @@ import {
     htmlPropertyToAttribute,
     isNull,
 } from '@lwc/shared';
-import { ariaReflectionPolyfillDescriptors } from '../libs/aria-reflection/aria-reflection';
+import { applyAriaReflection } from '../libs/aria-reflection/aria-reflection';
 import { logWarn } from '../shared/logger';
 import { getAssociatedVM } from './vm';
 import { getReadOnlyProxy } from './membrane';
@@ -164,11 +164,7 @@ export function HTMLBridgeElementFactory(
                     // and can break tooling that expects it to be iterable or defined, e.g. Jest:
                     // https://github.com/jestjs/jest/blob/b4c9587/packages/pretty-format/src/plugins/DOMElement.ts#L95
                     // It also doesn't make sense to override e.g. "constructor".
-                    .filter(
-                        (propName) =>
-                            !(propName in HTMLElementPrototype) &&
-                            !(propName in ariaReflectionPolyfillDescriptors)
-                    )
+                    .filter((propName) => !(propName in HTMLElementPrototype))
             );
 
             for (const propName of nonPublicPropertiesToWarnOn) {
@@ -254,30 +250,29 @@ export function HTMLBridgeElementFactory(
     return HTMLBridgeElement as HTMLElementConstructor;
 }
 
-// We do some special handling of non-standard ARIA props like ariaLabelledBy as well as props without (as of this
-// writing) broad cross-browser support like ariaBrailleLabel. This is so the reflection works correctly and preserves
-// backwards compatibility with the previous global polyfill approach.
-//
-// The goal here is to expose `elm.aria*` property accessors to work from outside a component, and to reflect `aria-*`
-// attrs. This is especially important because the template compiler compiles aria-* attrs on components to aria* props.
-// Note this works regardless of whether the global ARIA reflection polyfill is applied or not.
-//
-// Also note this ARIA reflection only really makes sense in the browser. On the server, there is no
-// `renderedCallback()`, so you cannot do e.g. `this.template.querySelector('x-child').ariaBusy = 'true'`. So we don't
-// need to expose ARIA props outside the LightningElement
-const basePublicProperties = [
-    ...getOwnPropertyNames(HTMLElementOriginalDescriptors),
-    ...(process.env.IS_BROWSER ? getOwnPropertyNames(ariaReflectionPolyfillDescriptors) : []),
-];
-
 export const BaseBridgeElement = HTMLBridgeElementFactory(
     HTMLElementConstructor,
-    basePublicProperties,
+    getOwnPropertyNames(HTMLElementOriginalDescriptors),
     [],
     [],
     null,
     false
 );
 
+if (process.env.IS_BROWSER) {
+    // This ARIA reflection only really makes sense in the browser. On the server, there is no `renderedCallback()`,
+    // so you cannot do e.g. `this.template.querySelector('x-child').ariaBusy = 'true'`. So we don't need to expose
+    // ARIA props outside the LightningElement
+    //
+    // Apply ARIA reflection to HTMLBridgeElement.prototype. This allows `elm.aria*` property accessors to work from
+    // outside a component, and to reflect `aria-*` attrs. This is especially important because the template compiler
+    // compiles aria-* attrs on components to aria* props.
+    // Note this works regardless of whether the global ARIA reflection polyfill is applied or not.
+    //
+    // Also note that we apply this to BaseBridgeElement.prototype to avoid excessively redefining property
+    // accessors inside the HTMLBridgeElementFactory.
+    applyAriaReflection(BaseBridgeElement.prototype);
+}
+
 freeze(BaseBridgeElement);
 seal(BaseBridgeElement.prototype);

packages/@lwc/engine-core/src/framework/base-lightning-element.ts

@@ -17,7 +17,6 @@ import {
     create,
     defineProperties,
     defineProperty,
-    entries,
     freeze,
     hasOwnProperty,
     isFunction,
@@ -32,7 +31,7 @@ import {
 
 import { logError, logWarn } from '../shared/logger';
 import { getComponentTag } from '../shared/format';
-import { ariaReflectionPolyfillDescriptors } from '../libs/aria-reflection/aria-reflection';
+import { applyAriaReflection } from '../libs/aria-reflection/aria-reflection';
 
 import { HTMLElementOriginalDescriptors } from './html-properties';
 import { getWrappedComponentsListener } from './component';
@@ -815,25 +814,12 @@ for (const propName in HTMLElementOriginalDescriptors) {
     );
 }
 
+defineProperties(LightningElement.prototype, lightningBasedDescriptors);
+
 // Apply ARIA reflection to LightningElement.prototype, on both the browser and server.
 // This allows `this.aria*` property accessors to work from inside a component, and to reflect `aria-*` attrs.
 // Note this works regardless of whether the global ARIA reflection polyfill is applied or not.
-if (process.env.IS_BROWSER) {
-    // In the browser, we use createBridgeToElementDescriptor, so we can get the normal reactivity lifecycle for
-    // aria* properties
-    for (const [propName, descriptor] of entries(ariaReflectionPolyfillDescriptors) as [
-        name: string,
-        descriptor: PropertyDescriptor
-    ][]) {
-        lightningBasedDescriptors[propName] = createBridgeToElementDescriptor(propName, descriptor);
-    }
-} else {
-    // On the server, we cannot use createBridgeToElementDescriptor because getAttribute/setAttribute are
-    // not supported on HTMLElement. So apply the polyfill directly on top of LightningElement
-    defineProperties(LightningElement.prototype, ariaReflectionPolyfillDescriptors);
-}
-
-defineProperties(LightningElement.prototype, lightningBasedDescriptors);
+applyAriaReflection(LightningElement.prototype);
 
 defineProperty(LightningElement, 'CustomElementConstructor', {
     get() {

packages/@lwc/engine-core/src/libs/aria-reflection/aria-reflection.ts

@@ -6,41 +6,42 @@
  */
 import {
     AriaPropNameToAttrNameMap,
+    defineProperty,
+    getOwnPropertyDescriptor,
     isNull,
     isUndefined,
-    create,
-    getPropertyDescriptor,
-    entries,
+    keys,
 } from '@lwc/shared';
-import { HTMLElementPrototype } from '../../framework/html-element';
+import { LightningElement } from '../../framework/base-lightning-element';
 
 // Apply ARIA string reflection behavior to a prototype.
 // This is deliberately kept separate from @lwc/aria-reflection. @lwc/aria-reflection is a global polyfill that is
-// needed for backwards compatibility in LEX, whereas this is designed to only apply to our own
+// needed for backwards compatibility in LEX, whereas `applyAriaReflection` is designed to only apply to our own
 // LightningElement/BaseBridgeElement prototypes.
-// Note we only need to handle ARIA reflections that aren't already in Element.prototype
-export const ariaReflectionPolyfillDescriptors = create(null);
-for (const [propName, attrName] of entries(AriaPropNameToAttrNameMap)) {
-    if (isUndefined(getPropertyDescriptor(HTMLElementPrototype, propName))) {
-        // Note that we need to call this.{get,set,has,remove}Attribute rather than dereferencing
-        // from Element.prototype, because these methods are overridden in LightningElement.
-        ariaReflectionPolyfillDescriptors[propName] = {
-            get(this: HTMLElement): any {
-                return this.getAttribute(attrName);
-            },
-            set(this: HTMLElement, newValue: any) {
-                // TODO [#3284]: there is disagreement between browsers and the spec on how to treat undefined
-                // Our historical behavior is to only treat null as removing the attribute
-                // See also https://github.com/w3c/aria/issues/1858
-                if (isNull(newValue)) {
-                    this.removeAttribute(attrName);
-                } else {
-                    this.setAttribute(attrName, newValue);
-                }
-            },
-            // configurable and enumerable to allow it to be overridden – this mimics Safari's/Chrome's behavior
-            configurable: true,
-            enumerable: true,
-        };
+export function applyAriaReflection(prototype: HTMLElement | LightningElement) {
+    for (const propName of keys(AriaPropNameToAttrNameMap)) {
+        const attrName = AriaPropNameToAttrNameMap[propName];
+        if (isUndefined(getOwnPropertyDescriptor(prototype, propName))) {
+            // Note that we need to call this.{get,set,has,remove}Attribute rather than dereferencing
+            // from Element.prototype, because these methods are overridden in LightningElement.
+            defineProperty(prototype, propName, {
+                get(this: HTMLElement): any {
+                    return this.getAttribute(attrName);
+                },
+                set(this: HTMLElement, newValue: any) {
+                    // TODO [#3284]: there is disagreement between browsers and the spec on how to treat undefined
+                    // Our historical behavior is to only treat null as removing the attribute
+                    // See also https://github.com/w3c/aria/issues/1858
+                    if (isNull(newValue)) {
+                        this.removeAttribute(attrName);
+                    } else {
+                        this.setAttribute(attrName, newValue);
+                    }
+                },
+                // configurable and enumerable to allow it to be overridden – this mimics Safari's/Chrome's behavior
+                configurable: true,
+                enumerable: true,
+            });
+        }
     }
 }

packages/@lwc/engine-dom/package.json

@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/engine-dom",
-    "version": "5.0.4",
+    "version": "5.0.5",
     "description": "Renders LWC components in a DOM environment.",
     "keywords": [
         "lwc"
@@ -42,8 +42,8 @@
         }
     },
     "devDependencies": {
-        "@lwc/engine-core": "5.0.4",
-        "@lwc/shared": "5.0.4"
+        "@lwc/engine-core": "5.0.5",
+        "@lwc/shared": "5.0.5"
     },
     "lwc": {
         "modules": [

packages/@lwc/engine-server/package.json

@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/engine-server",
-    "version": "5.0.4",
+    "version": "5.0.5",
     "description": "Renders LWC components in a server environment.",
     "keywords": [
         "lwc"
@@ -42,9 +42,9 @@
         }
     },
     "devDependencies": {
-        "@lwc/engine-core": "5.0.4",
-        "@lwc/rollup-plugin": "5.0.4",
-        "@lwc/shared": "5.0.4",
+        "@lwc/engine-core": "5.0.5",
+        "@lwc/rollup-plugin": "5.0.5",
+        "@lwc/shared": "5.0.5",
         "@rollup/plugin-virtual": "^3.0.1",
         "parse5": "^7.1.2",
         "@parse5/tools": "^0.3.0"

packages/@lwc/errors/package.json

@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/errors",
-    "version": "5.0.4",
+    "version": "5.0.5",
     "description": "LWC Error Utilities",
     "keywords": [
         "lwc"

packages/@lwc/features/package.json

@@ -4,7 +4,7 @@
         "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
     ],
     "name": "@lwc/features",
-    "version": "5.0.4",
+    "version": "5.0.5",
     "description": "LWC Features Flags",
     "keywords": [
         "lwc"
@@ -42,6 +42,6 @@
         }
     },
     "dependencies": {
-        "@lwc/shared": "5.0.4"
+        "@lwc/shared": "5.0.5"
     }
 }

packages/@lwc/integration-karma/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@lwc/integration-karma",
     "private": true,
-    "version": "5.0.4",
+    "version": "5.0.5",
     "scripts": {
         "start": "KARMA_MODE=watch karma start ./scripts/karma-configs/test/local.js",
         "test": "karma start ./scripts/karma-configs/test/local.js --single-run --browsers ChromeHeadless",
@@ -18,11 +18,11 @@
         "karma-sauce-launcher-fix-firefox": "using a fork to work around https://github.com/karma-runner/karma-sauce-launcher/issues/275"
     },
     "devDependencies": {
-        "@lwc/compiler": "5.0.4",
-        "@lwc/engine-dom": "5.0.4",
-        "@lwc/engine-server": "5.0.4",
-        "@lwc/rollup-plugin": "5.0.4",
-        "@lwc/synthetic-shadow": "5.0.4",
+        "@lwc/compiler": "5.0.5",
+        "@lwc/engine-dom": "5.0.5",
+        "@lwc/engine-server": "5.0.5",
+        "@lwc/rollup-plugin": "5.0.5",
+        "@lwc/synthetic-shadow": "5.0.5",
         "chokidar": "^3.5.3",
         "istanbul-lib-coverage": "^3.2.2",
         "istanbul-lib-report": "^3.0.1",

packages/@lwc/integration-karma/test/api/getComponentDef/index.spec.js

@@ -65,7 +65,9 @@ const GLOBAL_HTML_ATTRIBUTES = [
     'spellcheck',
     'tabIndex',
     'title',
-    ...ariaProperties,
+    // Copy over all aria props supported on Element.prototype. Note that this will vary from browser to browser.
+    // See: https://wicg.github.io/aom/spec/aria-reflection.html
+    ...Object.keys(Element.prototype).filter((prop) => ariaProperties.includes(prop)),
 ].sort();
 
 const message = (propName) =>