From 346bacdaf06ee3a07eb587d887818c04a723e0ee Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Wed, 4 Dec 2024 14:30:37 +0100 Subject: [PATCH] fix(a11y): timeline improvements --- .../timeline-item/timeline-item.component.html | 10 ++++++---- .../timeline-item/timeline-item.component.ts | 16 ++++++++++++++++ 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html index cb8c6f8e..1cea9560 100644 --- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html +++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html @@ -2,10 +2,10 @@ @if (pinType === 'now') { {{ 'it.timeline.today' | translate }} } -
+

@if (pinIcon) { - + } @else { } @@ -13,21 +13,23 @@
{{ pinText }}
-
+

@if ((categoryTitle && categoryLink) || eventDate) {
@if (categoryTitle) { + {{ categoryLabel }} {{ categoryTitle }} } @if (eventDate) { + {{ dateLabel }} {{ eventDate | date: dateFormat }} }
} -
{{ title }}
+

{{ title }}

{{ text }}

@if (signature) { {{ signature }} diff --git a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts index 54fae9a2..862204fa 100644 --- a/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts +++ b/projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts @@ -62,6 +62,22 @@ export class ItTimelineItemComponent extends ItAbstractComponent { */ @Input() pinIcon: IconName | undefined = 'code-circle'; + /** + * Timeline element PIN icon + * @default code-circle + */ + @Input() pinIconTitle: string | undefined; + + /** + * Timeline element category label + */ + @Input() categoryLabel: string | undefined = 'Categoria evento: '; + + /** + * Timeline element date label + */ + @Input() dateLabel: string | undefined = 'Data evento: '; + /** * Timeline element category title */