fix(core): property initialization

Fixes invalid native property initialization causing exception with certain custom elements. - closes #6589 - closes #6590 Signed-off-by: Cory Rylan <splintercode.cb@gmail.com>
vmware-clarity · Jan 25, 2022 · 1c61be8 · 1c61be8
1 parent 7c6e77b
commit 1c61be8
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 18 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
@@ -63,9 +63,6 @@ export class CdsInternalStaticOverlay extends CdsBaseFocusTrap {
 
   @i18n() i18n = I18nService.keys.overlay;
 
-  @property({ type: String })
-  ariaModal = 'true';
-
   // renderRoot needs delegatesFocus so that focus can cross the shadowDOM
   // inside an element with aria-modal set to true
   /** @private */
@@ -93,6 +90,11 @@ export class CdsInternalStaticOverlay extends CdsBaseFocusTrap {
   /* c8 ignore next */
   @query('.overlay-backdrop') protected backdrop: HTMLElement;
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.ariaModal = 'true';
+  }
+
   firstUpdated(props: Map<string, any>) {
     super.firstUpdated(props);
     this.backdrop.addEventListener('click', this.fireEventOnBackdropClick);

diff --git a/packages/core/src/internal-components/popup/pointer.element.ts b/packages/core/src/internal-components/popup/pointer.element.ts
@@ -4,8 +4,8 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { AriaBooleanAttributeValues, PointerElement, property, state } from '@cds/core/internal';
 import { html, LitElement } from 'lit';
+import { PointerElement, property } from '@cds/core/internal';
 import { getPointer } from './utils/pointer.utils.js';
 import styles from './pointer.element.scss';
 
@@ -27,9 +27,6 @@ import styles from './pointer.element.scss';
  *
  */
 export class CdsInternalPointer extends LitElement implements PointerElement {
-  @state({ type: String, reflect: true, attribute: 'aria-hidden' })
-  protected ariaHiddenAttr: AriaBooleanAttributeValues = 'true';
-
   @property({ type: String })
   axisAlign: 'start' | 'center' | 'end' = 'start';
 
@@ -53,6 +50,11 @@ export class CdsInternalPointer extends LitElement implements PointerElement {
     return this.type ? getPointer(this.type) : html`<slot></slot>`;
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.ariaHidden = 'true';
+  }
+
   static get styles() {
     return [styles];
   }

diff --git a/packages/core/src/navigation/navigation-item.element.ts b/packages/core/src/navigation/navigation-item.element.ts
@@ -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
@@ -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
@@ -173,8 +173,6 @@ export class CdsNavigation extends LitElement {
   @querySlotAll('cds-navigation-group')
   protected navigationGroupRefs: NodeListOf<CdsNavigationGroup>;
 
-  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));