-
Notifications
You must be signed in to change notification settings - Fork 396
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(engine-dom): remove ARIA reflection global polyfill (BREAKING CHA…
…NGE) (#3666)
- Loading branch information
1 parent
c7bd330
commit a7d190f
Showing
29 changed files
with
273 additions
and
180 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -45,7 +45,5 @@ | |
} | ||
} | ||
}, | ||
"dependencies": { | ||
"@lwc/shared": "3.8.0" | ||
} | ||
"dependencies": {} | ||
} |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,20 +1,85 @@ | ||
/* | ||
* Copyright (c) 2018, salesforce.com, inc. | ||
* Copyright (c) 2023, salesforce.com, inc. | ||
* All rights reserved. | ||
* SPDX-License-Identifier: MIT | ||
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT | ||
*/ | ||
import { AriaPropNameToAttrNameMap, keys } from '@lwc/shared'; | ||
import { detect } from './detect'; | ||
import { patch } from './polyfill'; | ||
|
||
export function applyAriaReflection(prototype: any = Element.prototype) { | ||
const ElementPrototypeAriaPropertyNames = keys(AriaPropNameToAttrNameMap); | ||
// Minimal polyfill of ARIA string reflection, plus some non-standard ARIA props | ||
// Taken from https://github.com/salesforce/lwc/blob/44a01ef/packages/%40lwc/shared/src/aria.ts#L22-L70 | ||
// This is designed for maximum backwards compatibility on LEX - it should never change. | ||
// We deliberately don't import from @lwc/shared because that would make this code less portable. | ||
const ARIA_PROPERTIES = [ | ||
'ariaActiveDescendant', | ||
'ariaAtomic', | ||
'ariaAutoComplete', | ||
'ariaBusy', | ||
'ariaChecked', | ||
'ariaColCount', | ||
'ariaColIndex', | ||
'ariaColSpan', | ||
'ariaControls', | ||
'ariaCurrent', | ||
'ariaDescribedBy', | ||
'ariaDetails', | ||
'ariaDisabled', | ||
'ariaErrorMessage', | ||
'ariaExpanded', | ||
'ariaFlowTo', | ||
'ariaHasPopup', | ||
'ariaHidden', | ||
'ariaInvalid', | ||
'ariaKeyShortcuts', | ||
'ariaLabel', | ||
'ariaLabelledBy', | ||
'ariaLevel', | ||
'ariaLive', | ||
'ariaModal', | ||
'ariaMultiLine', | ||
'ariaMultiSelectable', | ||
'ariaOrientation', | ||
'ariaOwns', | ||
'ariaPlaceholder', | ||
'ariaPosInSet', | ||
'ariaPressed', | ||
'ariaReadOnly', | ||
'ariaRelevant', | ||
'ariaRequired', | ||
'ariaRoleDescription', | ||
'ariaRowCount', | ||
'ariaRowIndex', | ||
'ariaRowSpan', | ||
'ariaSelected', | ||
'ariaSetSize', | ||
'ariaSort', | ||
'ariaValueMax', | ||
'ariaValueMin', | ||
'ariaValueNow', | ||
'ariaValueText', | ||
'role', | ||
]; | ||
|
||
for (let i = 0, len = ElementPrototypeAriaPropertyNames.length; i < len; i += 1) { | ||
const propName = ElementPrototypeAriaPropertyNames[i]; | ||
if (detect(propName, prototype)) { | ||
patch(propName, prototype); | ||
} | ||
for (const prop of ARIA_PROPERTIES) { | ||
const attribute = prop.replace(/^aria/, 'aria-').toLowerCase(); // e.g. ariaPosInSet => aria-posinset | ||
|
||
if (!Object.getOwnPropertyDescriptor(Element.prototype, prop)) { | ||
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 spec, as well as | ||
// our historical behavior. See: https://github.com/w3c/aria/issues/1858 | ||
if (value === null) { | ||
this.removeAttribute(attribute); | ||
} else { | ||
this.setAttribute(attribute, value); | ||
} | ||
}, | ||
// configurable and enumerable to allow it to be overridden – this mimics Safari's/Chrome's behavior | ||
configurable: true, | ||
enumerable: true, | ||
}); | ||
} | ||
} |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
47 changes: 47 additions & 0 deletions
47
packages/@lwc/engine-core/src/libs/aria-reflection/aria-reflection.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
/* | ||
* Copyright (c) 2023, salesforce.com, inc. | ||
* All rights reserved. | ||
* SPDX-License-Identifier: MIT | ||
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT | ||
*/ | ||
import { | ||
AriaPropNameToAttrNameMap, | ||
defineProperty, | ||
getOwnPropertyDescriptor, | ||
isNull, | ||
isUndefined, | ||
keys, | ||
} from '@lwc/shared'; | ||
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 `applyAriaReflection` is designed to only apply to our own | ||
// LightningElement/BaseBridgeElement prototypes. | ||
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, | ||
}); | ||
} | ||
} | ||
} |
Oops, something went wrong.