diff --git a/packages/core/src/breadcrumb/breadcrumb.element.ts b/packages/core/src/breadcrumb/breadcrumb.element.ts index 060dfd111e4..7f1a8eb2fc5 100644 --- a/packages/core/src/breadcrumb/breadcrumb.element.ts +++ b/packages/core/src/breadcrumb/breadcrumb.element.ts @@ -27,7 +27,10 @@ export class CdsBreadcrumb extends LitElement { @querySlot('[slot="cds-separator"]') private customSeparator: HTMLElement; - role = 'navigation'; + connectedCallback() { + super.connectedCallback(); + this.role = 'navigation'; + } render() { return html` diff --git a/packages/core/src/card/card.element.ts b/packages/core/src/card/card.element.ts index 694ccb1e059..bc218f7839f 100644 --- a/packages/core/src/card/card.element.ts +++ b/packages/core/src/card/card.element.ts @@ -49,8 +49,6 @@ import styles from './card.element.scss'; * @cssprop --cds-card-remove-margin */ export class CdsCard extends CdsInternalPanel { - role = 'region'; - @globalStyle() globalStyles = css` [cds-card-remove-margin] { margin-left: calc(-1 * var(--card-remove-margin)); @@ -61,4 +59,9 @@ export class CdsCard extends CdsInternalPanel { static get styles() { return [...super.styles, styles]; } + + connectedCallback() { + super.connectedCallback(); + this.role = 'region'; + } } diff --git a/packages/core/src/internal/utils/events.ts b/packages/core/src/internal/utils/events.ts index 6b24289e7d9..3800021f467 100644 --- a/packages/core/src/internal/utils/events.ts +++ b/packages/core/src/internal/utils/events.ts @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved. + * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. * This software is released under MIT license. * The full license information can be found in LICENSE in the root directory of this project. */ @@ -9,6 +9,10 @@ export function stopEvent(event: Event) { event.stopPropagation(); } +function isNode() { + return (globalThis as any)?.process?.env?.JEST_WORKER_ID !== undefined; // Jest and JSDom breaks defining a new property +} + export const getElementUpdates = ( element: HTMLElement, propertyKey: string, @@ -29,7 +33,7 @@ export const getElementUpdates = ( const updatedProp = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), propertyKey) as any; - if (updatedProp) { + if (updatedProp && !isNode()) { Object.defineProperty(element, propertyKey, { get: updatedProp.get, set: val => { diff --git a/packages/core/src/navigation/navigation-item.element.ts b/packages/core/src/navigation/navigation-item.element.ts index 1b4d3b290bf..42b2a0cf840 100644 --- a/packages/core/src/navigation/navigation-item.element.ts +++ b/packages/core/src/navigation/navigation-item.element.ts @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved. + * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. * This software is released under MIT license. * The full license information can be found in LICENSE in the root directory of this project. */ @@ -71,10 +71,9 @@ export class CdsNavigationItem extends LitElement implements FocusableItem { @querySlotAll('[cds-navigation-sr-text]') itemText: NodeListOf; - role = 'listitem'; - connectedCallback() { super.connectedCallback(); + this.role = 'listitem'; if (!this.id) { this.id = createId(); } diff --git a/packages/core/src/navigation/navigation.element.ts b/packages/core/src/navigation/navigation.element.ts index c309bbcfc20..ffb26bc21dc 100644 --- a/packages/core/src/navigation/navigation.element.ts +++ b/packages/core/src/navigation/navigation.element.ts @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved. + * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. * This software is released under MIT license. * The full license information can be found in LICENSE in the root directory of this project. */ @@ -173,8 +173,6 @@ export class CdsNavigation extends LitElement { @querySlotAll('cds-navigation-group') protected navigationGroupRefs: NodeListOf; - role = 'list'; - private toggle() { this.expandedChange.emit(!this.expanded); } @@ -364,6 +362,7 @@ export class CdsNavigation extends LitElement { connectedCallback() { super.connectedCallback(); + this.role = 'list'; this.rootNavigationStart?.addEventListener('focus', this.focusRootStart.bind(this)); this.rootNavigationStart?.addEventListener('blur', this.blurRootStart.bind(this)); this.rootNavigationStart?.addEventListener('keydown', this.handleRootStartKeys.bind(this)); diff --git a/packages/core/src/polyfills/aria-reflect.ts b/packages/core/src/polyfills/aria-reflect.ts index 0bce43d3419..e2a3aea9de3 100644 --- a/packages/core/src/polyfills/aria-reflect.ts +++ b/packages/core/src/polyfills/aria-reflect.ts @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved. + * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved. * This software is released under MIT license. * The full license information can be found in LICENSE in the root directory of this project. */ @@ -59,19 +59,15 @@ declare global { let roleRegistered = false; let ariaRegistered = false; -function isNode() { - return (globalThis as any)?.process?.env?.JEST_WORKER_ID !== undefined; // Jest and JSDom breaks on property reflection -} - // eslint-disable-next-line -if (!roleRegistered && !Element.prototype.hasOwnProperty('role') && !isNode()) { +if (!roleRegistered && !Element.prototype.hasOwnProperty('role')) { reflect(Element.prototype, 'role', 'role'); roleRegistered = true; } // https://www.w3.org/TR/wai-aria-1.0/states_and_properties // eslint-disable-next-line -if (!ariaRegistered && !Element.prototype.hasOwnProperty('ariaLabel') && !isNode()) { +if (!ariaRegistered && !Element.prototype.hasOwnProperty('ariaLabel')) { ariaRegistered = true; [ 'ActiveDescendant',