chore(core): property initialization (backport)

Fixes invalid native property initialization causing exception with certain custom elements. - closes #6589 - closes #6590 Signed-off-by: Cory Rylan <[email protected]>
vmware-archive · Jan 25, 2022 · ad5d1dc · ad5d1dc
1 parent 8f1fa37
commit ad5d1dc
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 21 deletions.
diff --git a/packages/core/src/breadcrumb/breadcrumb.element.ts b/packages/core/src/breadcrumb/breadcrumb.element.ts
@@ -27,8 +27,6 @@ export class CdsBreadcrumb extends LitElement {
 
   @querySlot('[slot="cds-separator"]') private customSeparator: HTMLElement;
 
-  role = 'navigation';
-
   render() {
     return html`
       <div class="private-host">
@@ -47,6 +45,11 @@ export class CdsBreadcrumb extends LitElement {
     `;
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.role = 'navigation';
+  }
+
   private get separator() {
     if (this.customSeparator) {
       const separatorClone = this.customSeparator.cloneNode(true) as Element;

diff --git 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-components/overlay/overlay.element.ts b/packages/core/src/internal-components/overlay/overlay.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.
  */
@@ -92,12 +92,6 @@ export class CdsInternalOverlay extends CdsBaseFocusTrap implements Animatable {
   @event()
   cdsMotionChange: EventEmitter<string>;
 
-  @property({ type: String })
-  ariaModal = 'true';
-
-  @property({ type: String })
-  role = 'dialog';
-
   // renderRoot needs delegatesFocus so that focus can cross the shadowDOM
   // inside an element with aria-modal set to true
   /** @private */
@@ -138,6 +132,8 @@ export class CdsInternalOverlay extends CdsBaseFocusTrap implements Animatable {
 
   connectedCallback() {
     super.connectedCallback();
+    this.ariaModal = 'true';
+    this.role = 'dialog';
     window.addEventListener('keydown', this.fireEventOnEscape);
   }
 

diff --git 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<HTMLSpanElement>;
 
-  role = 'listitem';
-
   connectedCallback() {
     super.connectedCallback();
+    this.role = 'listitem';
     if (!this.id) {
       this.id = createId();
     }

diff --git a/packages/core/src/navigation/navigation-start.element.ts b/packages/core/src/navigation/navigation-start.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.
  */
@@ -67,9 +67,6 @@ export class CdsNavigationStart extends LitElement implements FocusableItem {
   @property({ type: Boolean, reflect: true })
   isGroupStart = false;
 
-  @property({ type: String, reflect: true })
-  role = 'listitem';
-
   @property({ type: String })
   navigationGroupId: string;
 
@@ -107,6 +104,7 @@ export class CdsNavigationStart extends LitElement implements FocusableItem {
 
   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
@@ -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.
  */
@@ -174,8 +174,6 @@ export class CdsNavigation extends LitElement implements Animatable {
   @querySlotAll('cds-navigation-group')
   protected navigationGroupRefs: NodeListOf<CdsNavigationGroup>;
 
-  role = 'list';
-
   private toggle() {
     this.expandedChange.emit(!this.expanded);
   }
@@ -365,6 +363,7 @@ export class CdsNavigation extends LitElement implements Animatable {
 
   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));