From c1c81fcdc97c47c39a189140e7b44bc1e317142f Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Mon, 9 Mar 2026 15:53:40 +0200
Subject: [PATCH] fix(date-picker): fixed clear button aria-label #341

---
 tedi/components/form/date-picker/date-picker.component.html | 6 ++----
 .../form/date-picker/date-picker.component.spec.ts          | 4 ++++
 tedi/components/form/date-picker/date-picker.component.ts   | 6 ++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/tedi/components/form/date-picker/date-picker.component.html b/tedi/components/form/date-picker/date-picker.component.html
index 34b5229da..4e625f70b 100644
--- a/tedi/components/form/date-picker/date-picker.component.html
+++ b/tedi/components/form/date-picker/date-picker.component.html
@@ -28,7 +28,7 @@
       size="small"
       class="tedi-date-picker__clear"
       [iconSize]="18"
-      [attr.aria-label]="translationService.track('date-picker.clear-date')()"
+      [ariaLabel]="'date-picker.clear-date' | tediTranslate"
       [disabled]="inputDisabled()"
       (click)="clearInput()"
     ></button>
@@ -46,9 +46,7 @@
       variant="neutral"
       size="small"
       class="tedi-date-picker__toggle"
-      [attr.aria-label]="
-        translationService.track('date-picker.open-calendar')()
-      "
+      [attr.aria-label]="'date-picker.open-calendar' | tediTranslate"
       [disabled]="inputDisabled()"
       (click)="openCalendar()"
     >
diff --git a/tedi/components/form/date-picker/date-picker.component.spec.ts b/tedi/components/form/date-picker/date-picker.component.spec.ts
index bece94c8d..fa4ffd4e1 100644
--- a/tedi/components/form/date-picker/date-picker.component.spec.ts
+++ b/tedi/components/form/date-picker/date-picker.component.spec.ts
@@ -5,6 +5,10 @@ import { NgxFloatUiContentComponent } from "ngx-float-ui";
 import { DatePickerCalendarGridComponent } from "./date-picker-calendar-grid/date-picker-calendar-grid.component";
 
 class TranslationMock {
+  translate(key: string) {
+    return key;
+  }
+
   track(key: string) {
     return () => key;
   }
diff --git a/tedi/components/form/date-picker/date-picker.component.ts b/tedi/components/form/date-picker/date-picker.component.ts
index 40b92a59f..17bd97967 100644
--- a/tedi/components/form/date-picker/date-picker.component.ts
+++ b/tedi/components/form/date-picker/date-picker.component.ts
@@ -5,7 +5,6 @@ import {
   computed,
   model,
   input,
-  inject,
   signal,
   OnInit,
   viewChild,
@@ -15,7 +14,6 @@ import {
 import { ButtonComponent } from "../../buttons/button/button.component";
 import { ClosingButtonComponent } from "../../buttons/closing-button/closing-button.component";
 import { IconComponent } from "../../base/icon/icon.component";
-import { TediTranslationService } from "../../../services/translation/translation.service";
 import { SeparatorComponent } from "../../helpers/separator/separator.component";
 import { PopoverComponent } from "../../overlay/popover/popover.component";
 import { PopoverContentComponent } from "../../overlay/popover/popover-content/popover-content.component";
@@ -25,6 +23,7 @@ import { DatePickerCalendarGridComponent } from "./date-picker-calendar-grid/dat
 import { DatePickerMonthGridComponent } from "./date-picker-month-grid/date-picker-month-grid.component";
 import { DatePickerYearGridComponent } from "./date-picker-year-grid/date-picker-year-grid.component";
 import { formatDate, parseDate, isSameDay, isBeforeDay, isAfterDay, getISOWeek } from "../../../utils/date.util";
+import { TediTranslationPipe } from "../../../services/translation/translation.pipe";
 
 export interface DatePickerDay {
   date: Date;
@@ -66,6 +65,7 @@ let datePickerId = 0;
     DatePickerCalendarGridComponent,
     DatePickerMonthGridComponent,
     DatePickerYearGridComponent,
+    TediTranslationPipe
   ],
 })
 export class DatePickerComponent implements OnInit {
@@ -271,8 +271,6 @@ export class DatePickerComponent implements OnInit {
   readonly calendarGrid = viewChild<DatePickerCalendarGridComponent>("gridElement");
   readonly popover = viewChild.required(PopoverComponent);
 
-  readonly translationService = inject(TediTranslationService);
-
   constructor() {
     effect(() => {
       const selected = this.selected();