fix: minimal ARIA string reflection polyfill for JSDOM

packages/@lwc/jest-preset/src/aria-reflection-polyfill.js

@@ -0,0 +1,72 @@
+// Minimal polyfill for ARIA string reflection, e.g. aria-label -> ariaLabel.
+// As of this writing, ARIA string reflection is supported in Chrome and Safari, but not Firefox or JSDOM.
+// TODO: remove after JSDOM merges this PR: https://github.com/jsdom/jsdom/pull/3586
+
+// ARIA Element properties that reflect to strings (not Element or FrozenArray<Element>)
+// https://w3c.github.io/aria/#ARIAMixin
+const ARIA_STRING_PROPS = [
+    'role',
+    'ariaAtomic',
+    'ariaAutoComplete',
+    'ariaBusy',
+    'ariaChecked',
+    'ariaColCount',
+    'ariaColIndex',
+    'ariaColIndexText',
+    'ariaColSpan',
+    'ariaCurrent',
+    'ariaDescription',
+    'ariaDisabled',
+    'ariaExpanded',
+    'ariaHasPopup',
+    'ariaHidden',
+    'ariaInvalid',
+    'ariaKeyShortcuts',
+    'ariaLabel',
+    'ariaLevel',
+    'ariaLive',
+    'ariaModal',
+    'ariaMultiLine',
+    'ariaMultiSelectable',
+    'ariaOrientation',
+    'ariaPlaceholder',
+    'ariaPosInSet',
+    'ariaPressed',
+    'ariaReadOnly',
+    'ariaRequired',
+    'ariaRoleDescription',
+    'ariaRowCount',
+    'ariaRowIndex',
+    'ariaRowIndexText',
+    'ariaRowSpan',
+    'ariaSelected',
+    'ariaSetSize',
+    'ariaSort',
+    'ariaValueMax',
+    'ariaValueMin',
+    'ariaValueNow',
+    'ariaValueText',
+];
+
+for (const prop of ARIA_STRING_PROPS) {
+    if (!(prop in Element.prototype)) {
+        // sniff for support
+        // e.g. `ariaPosInSet` -> `aria-posinset`
+        const attribute = prop.replace(/[A-Z]/, (letter) => `-${letter}`).toLowerCase();
+        Object.defineProperty(Element.prototype, prop, {
+            get() {
+                return this.getAttribute(attribute);
+            },
+            set(value) {
+                // Per the spec, only null is treated as removing the attribute. However, Chromium/WebKit currently
+                // differ from the spec and allow undefined as well. Here, we follow the standard.
+                // See: https://github.com/w3c/aria/issues/1858
+                if (value === null) {
+                    this.removeAttribute(attribute);
+                } else {
+                    this.setAttribute(attribute, value);
+                }
+            },
+        });
+    }
+}

packages/@lwc/jest-preset/src/setup.js

@@ -1,3 +1,6 @@
+// TODO: remove after JSDOM merges this PR: https://github.com/jsdom/jsdom/pull/3586
+require('./aria-reflection-polyfill');
+
 const config = global['lwc-jest'] || {};
 const { nativeShadow } = config;
 

test/src/modules/smoke/aria/__tests__/aria.spec.js

@@ -0,0 +1,62 @@
+// Ensure that basic ARIA string reflection works
+// TODO: remove after JSDOM merges this PR: https://github.com/jsdom/jsdom/pull/3586
+
+// ARIA Element properties that reflect to strings (not Element or FrozenArray<Element>)
+// https://w3c.github.io/aria/#ARIAMixin
+const ARIA_STRING_PROPS_TO_ATTRS = {
+    role: 'role',
+    ariaAtomic: 'aria-atomic',
+    ariaAutoComplete: 'aria-autocomplete',
+    ariaBusy: 'aria-busy',
+    ariaChecked: 'aria-checked',
+    ariaColCount: 'aria-colcount',
+    ariaColIndex: 'aria-colindex',
+    ariaColIndexText: 'aria-colindextext',
+    ariaColSpan: 'aria-colspan',
+    ariaCurrent: 'aria-current',
+    ariaDescription: 'aria-description',
+    ariaDisabled: 'aria-disabled',
+    ariaExpanded: 'aria-expanded',
+    ariaHasPopup: 'aria-haspopup',
+    ariaHidden: 'aria-hidden',
+    ariaInvalid: 'aria-invalid',
+    ariaKeyShortcuts: 'aria-keyshortcuts',
+    ariaLabel: 'aria-label',
+    ariaLevel: 'aria-level',
+    ariaLive: 'aria-live',
+    ariaModal: 'aria-modal',
+    ariaMultiLine: 'aria-multiline',
+    ariaMultiSelectable: 'aria-multiselectable',
+    ariaOrientation: 'aria-orientation',
+    ariaPlaceholder: 'aria-placeholder',
+    ariaPosInSet: 'aria-posinset',
+    ariaPressed: 'aria-pressed',
+    ariaReadOnly: 'aria-readonly',
+    ariaRequired: 'aria-required',
+    ariaRoleDescription: 'aria-roledescription',
+    ariaRowCount: 'aria-rowcount',
+    ariaRowIndex: 'aria-rowindex',
+    ariaRowIndexText: 'aria-rowindextext',
+    ariaRowSpan: 'aria-rowspan',
+    ariaSelected: 'aria-selected',
+    ariaSetSize: 'aria-setsize',
+    ariaSort: 'aria-sort',
+    ariaValueMax: 'aria-valuemax',
+    ariaValueMin: 'aria-valuemin',
+    ariaValueNow: 'aria-valuenow',
+    ariaValueText: 'aria-valuetext',
+};
+
+describe('ARIA string reflection', () => {
+    for (const [prop, attribute] of Object.entries(ARIA_STRING_PROPS_TO_ATTRS)) {
+        it(attribute, () => {
+            const div = document.createElement('div');
+
+            div.setAttribute(attribute, 'foo');
+            expect(div[prop]).toBe('foo');
+
+            div[prop] = null;
+            expect(div.getAttribute(attribute)).toBeNull();
+        });
+    }
+});