fix(a11y): timeline improvements

italia · Dec 4, 2024 · 346bacd · 346bacd
1 parent d0948cc
commit 346bacd
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/...n-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html b/...n-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html
@@ -2,32 +2,34 @@
   @if (pinType === 'now') {
     <span class="it-now-label d-none d-lg-flex">{{ 'it.timeline.today' | translate }}</span>
   }
-  <div class="it-pin-wrapper" [ngClass]="{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }">
+  <h3 class="it-pin-wrapper" [ngClass]="{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }">
     <div class="pin-icon">
       @if (pinIcon) {
-        <it-icon [name]="pinIcon"></it-icon>
+        <it-icon [name]="pinIcon" [title]="pinIconTitle" [attr.role]="pinIconTitle ? 'img' : null"></it-icon>
       } @else {
         <it-icon name="code-circle"></it-icon>
       }
     </div>
     <div class="pin-text">
       <span>{{ pinText }}</span>
     </div>
-  </div>
+  </h3>
   <div class="card-wrapper">
     <div class="card">
       <div class="card-body">
         @if ((categoryTitle && categoryLink) || eventDate) {
           <div class="category-top">
             @if (categoryTitle) {
+              <span class="visually-hidden">{{ categoryLabel }}</span>
               <a class="category" [href]="categoryLink">{{ categoryTitle }}</a>
             }
             @if (eventDate) {
+              <span class="visually-hidden">{{ dateLabel }}</span>
               <span class="data">{{ eventDate | date: dateFormat }}</span>
             }
           </div>
         }
-        <h5 class="card-title">{{ title }}</h5>
+        <h4 class="card-title">{{ title }}</h4>
         <p class="card-text">{{ text }}</p>
         @if (signature) {
           <span class="card-signature">{{ signature }}</span>

diff --git a/...ign-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts b/...ign-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
    */