fix: fix datepicker initialization (#2266)

Co-authored-by: Lukas Spirig <[email protected]>
sbb-design-systems · Dec 6, 2023 · cc23aff · cc23aff
1 parent e0ce718
commit cc23aff
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 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
@@ -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
@@ -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/__snapshots__/datepicker.spec.snap.js 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"] = 
+`<p
+  id="status-container"
+  role="status"
+>
+</p>
+`;
+/* end snapshot sbb-datepicker renders */
+
diff --git 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`<sbb-datepicker></sbb-datepicker>`);
 
     expect(root).dom.to.be.equal(`<sbb-datepicker></sbb-datepicker>`);
-    expect(root).shadowDom.to.be.equal(`<p role="status"></p>`);
+    await expect(root).shadowDom.to.be.equalSnapshot();
   });
 });
 

diff --git 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<Date> =
     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`<p
-      role="status"
-      ${ref((ref: HTMLParagraphElement): void => {
-        this._statusContainer = ref;
-      })}
-    ></p>`;
+    return html`<p id="status-container" role="status"></p>`;
   }
 }