From cc664b1ff076f6da1bbff3b2ce8322bce3cf944b Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Wed, 6 Dec 2023 15:04:56 +0100 Subject: [PATCH 1/3] fix: fix datepicker initialization --- .../datepicker-next-day.ts | 9 +++--- .../datepicker-previous-day.ts | 9 +++--- .../datepicker/datepicker/datepicker.spec.ts | 2 +- .../datepicker/datepicker/datepicker.ts | 30 ++++++++++--------- 4 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts b/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts index 828887fc05..6e871ea169 100644 --- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts +++ b/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts @@ -11,7 +11,7 @@ import { languageChangeHandlerAspect, } from '../../core/eventing'; import { i18nNextDay, i18nSelectNextDay, i18nToday } from '../../core/i18n'; -import { resolveButtonRenderVariables } from '../../core/interfaces'; +import { ButtonProperties, resolveButtonRenderVariables } from '../../core/interfaces'; import { InputUpdateEvent, datepickerControlRegisteredEventFactory, @@ -28,7 +28,7 @@ import '../../icon'; * Combined with a `sbb-datepicker`, it can be used to move the date ahead. */ @customElement('sbb-datepicker-next-day') -export class SbbDatepickerNextDay extends LitElement { +export class SbbDatepickerNextDay extends LitElement implements ButtonProperties { public static override styles: CSSResultGroup = style; /** The name attribute to use for the button. */ @@ -86,8 +86,7 @@ export class SbbDatepickerNextDay extends LitElement { public override connectedCallback(): void { super.connectedCallback(); - const signal = this._abort.signal; - this.addEventListener('click', () => this._handleClick(), { signal }); + this.addEventListener('click', () => this._handleClick(), { signal: this._abort.signal }); this._handlerRepository.connect(); this._syncUpstreamProperties(); if (!this.datePicker) { @@ -134,7 +133,7 @@ export class SbbDatepickerNextDay extends LitElement { this.parentElement?.addEventListener( 'inputUpdated', (e: Event) => this._init(e.target as SbbDatepicker), - { once: true, signal: this._abort.signal }, + { once: true, signal: this._datePickerController.signal }, ); return; } diff --git a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts index 95c8994ed8..da8bb14128 100644 --- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts +++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts @@ -11,7 +11,7 @@ import { languageChangeHandlerAspect, } from '../../core/eventing'; import { i18nPreviousDay, i18nSelectPreviousDay, i18nToday } from '../../core/i18n'; -import { resolveButtonRenderVariables } from '../../core/interfaces'; +import { ButtonProperties, resolveButtonRenderVariables } from '../../core/interfaces'; import { InputUpdateEvent, datepickerControlRegisteredEventFactory, @@ -28,7 +28,7 @@ import '../../icon'; * Combined with a `sbb-datepicker`, it can be used to move the date back. */ @customElement('sbb-datepicker-previous-day') -export class SbbDatepickerPreviousDay extends LitElement { +export class SbbDatepickerPreviousDay extends LitElement implements ButtonProperties { public static override styles: CSSResultGroup = style; /** The name attribute to use for the button. */ @@ -86,8 +86,7 @@ export class SbbDatepickerPreviousDay extends LitElement { public override connectedCallback(): void { super.connectedCallback(); - const signal = this._abort.signal; - this.addEventListener('click', () => this._handleClick(), { signal }); + this.addEventListener('click', () => this._handleClick(), { signal: this._abort.signal }); this._handlerRepository.connect(); this._syncUpstreamProperties(); if (!this.datePicker) { @@ -134,7 +133,7 @@ export class SbbDatepickerPreviousDay extends LitElement { this.parentElement?.addEventListener( 'inputUpdated', (e: Event) => this._init(e.target as SbbDatepicker), - { once: true, signal: this._abort.signal }, + { once: true, signal: this._datePickerController.signal }, ); return; } diff --git a/src/components/datepicker/datepicker/datepicker.spec.ts b/src/components/datepicker/datepicker/datepicker.spec.ts index 69c5ccc3f5..fcc0943740 100644 --- a/src/components/datepicker/datepicker/datepicker.spec.ts +++ b/src/components/datepicker/datepicker/datepicker.spec.ts @@ -19,7 +19,7 @@ describe('sbb-datepicker', () => { const root = await fixture(html``); expect(root).dom.to.be.equal(``); - expect(root).shadowDom.to.be.equal(`

`); + expect(root).shadowDom.to.be.equalSnapshot(); }); }); diff --git a/src/components/datepicker/datepicker/datepicker.ts b/src/components/datepicker/datepicker/datepicker.ts index 48e73f45ba..4244323d03 100644 --- a/src/components/datepicker/datepicker/datepicker.ts +++ b/src/components/datepicker/datepicker/datepicker.ts @@ -1,6 +1,5 @@ import { CSSResultGroup, LitElement, PropertyValues, TemplateResult, html } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; -import { ref } from 'lit/directives/ref.js'; import { readConfig } from '../../core/config'; import { DateAdapter, defaultDateAdapter } from '../../core/datetime'; @@ -331,8 +330,6 @@ export class SbbDatepicker extends LitElement { private _dateAdapter: DateAdapter = readConfig().datetime?.dateAdapter ?? defaultDateAdapter; - private _statusContainer: HTMLParagraphElement | null; - private _handlerRepository = new HandlerRepository( this as HTMLElement, languageChangeHandlerAspect((l) => { @@ -381,6 +378,11 @@ export class SbbDatepicker extends LitElement { this._handlerRepository.disconnect(); } + protected override firstUpdated(_changedProperties: PropertyValues): void { + super.firstUpdated(_changedProperties); + this._setAriaLiveMessage(this.getValueAsDate()); + } + private _parseAndFormatValue(value: string): string { const d = this._parse(value); return !this._dateAdapter.isValid(d) ? value : this._format(d); @@ -472,20 +474,20 @@ export class SbbDatepicker extends LitElement { year: 'numeric', }); - this._statusContainer.innerText = date - ? `${i18nDateChangedTo[this._currentLanguage]} ${ariaLiveFormatter.format( - date, - )}, ${dateFormatter.format(date)}` - : ''; + const containerElement: HTMLParagraphElement | undefined = + this.shadowRoot.querySelector?.('#status-container'); + + if (containerElement) { + containerElement.innerText = date + ? `${i18nDateChangedTo[this._currentLanguage]} ${ariaLiveFormatter.format( + date, + )}, ${dateFormatter.format(date)}` + : ''; + } } protected override render(): TemplateResult { - return html`

{ - this._statusContainer = ref; - })} - >

`; + return html`

`; } } From abc691566c774d13b7a1cec30df9d42c808cf9a5 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Wed, 6 Dec 2023 15:12:22 +0100 Subject: [PATCH 2/3] fix: add snapshot --- .../datepicker/__snapshots__/datepicker.spec.snap.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/components/datepicker/datepicker/__snapshots__/datepicker.spec.snap.js diff --git a/src/components/datepicker/datepicker/__snapshots__/datepicker.spec.snap.js b/src/components/datepicker/datepicker/__snapshots__/datepicker.spec.snap.js new file mode 100644 index 0000000000..dc7008007f --- /dev/null +++ b/src/components/datepicker/datepicker/__snapshots__/datepicker.spec.snap.js @@ -0,0 +1,12 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-datepicker renders"] = +`

+

+`; +/* end snapshot sbb-datepicker renders */ + From 70b0605714740b42491aa892da2600b7525737ec Mon Sep 17 00:00:00 2001 From: Jeri Peier Date: Wed, 6 Dec 2023 16:06:49 +0100 Subject: [PATCH 3/3] fix: await snapshot Co-authored-by: Lukas Spirig --- src/components/datepicker/datepicker/datepicker.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/datepicker/datepicker/datepicker.spec.ts b/src/components/datepicker/datepicker/datepicker.spec.ts index fcc0943740..4603960eea 100644 --- a/src/components/datepicker/datepicker/datepicker.spec.ts +++ b/src/components/datepicker/datepicker/datepicker.spec.ts @@ -19,7 +19,7 @@ describe('sbb-datepicker', () => { const root = await fixture(html``); expect(root).dom.to.be.equal(``); - expect(root).shadowDom.to.be.equalSnapshot(); + await expect(root).shadowDom.to.be.equalSnapshot(); }); });