From f21879026684fe61e4c7410500925295e254122b Mon Sep 17 00:00:00 2001 From: Cory Rylan Date: Tue, 25 Jan 2022 13:06:28 -0600 Subject: [PATCH] fix(core): property initialization Fixes invalid native property initialization causing exception with certain custom elements. - closes #6589 - closes #6590 Signed-off-by: Cory Rylan --- packages/core/src/breadcrumb/breadcrumb.element.ts | 7 +++++-- packages/core/src/card/card.element.ts | 7 +++++-- .../src/internal-components/overlay/overlay.element.ts | 8 +++++--- .../src/internal-components/popup/pointer.element.ts | 10 ++++++---- .../core/src/navigation/navigation-item.element.ts | 3 +-- .../core/src/navigation/navigation-start.element.ts | 4 +--- packages/core/src/navigation/navigation.element.ts | 3 +-- 7 files changed, 24 insertions(+), 18 deletions(-) diff --git a/packages/core/src/breadcrumb/breadcrumb.element.ts b/packages/core/src/breadcrumb/breadcrumb.element.ts index 060dfd111e..d52c72787f 100644 --- 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`
@@ -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 index 694ccb1e05..bc218f7839 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-components/overlay/overlay.element.ts b/packages/core/src/internal-components/overlay/overlay.element.ts index 1a78c8c12a..6b8e19743e 100644 --- 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) { 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 index b15cc3a0cd..b2af5bbd41 100644 --- 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``; } + 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 index 1b4d3b290b..2b6130d5e2 100644 --- 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; - 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 index 1a4cbf3c6b..da31736fd9 100644 --- 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 index c309bbcfc2..cbf0307334 100644 --- 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; - 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));