feat(a11y): add title to icons

Author: astagi

projects/design-angular-kit/src/lib/components/utils/icon/icon.component.html

@@ -1,3 +1,6 @@
-<svg [attr.aria-hidden]="isAriaHidden" [attr.aria-label]="labelWaria" [class]="iconClass">
+<svg [attr.role]="role" [attr.aria-hidden]="isAriaHidden" [attr.aria-label]="title || labelWaria" [class]="iconClass">
+  @if (title || labelWaria) {
+    <title>{{ title || labelWaria }}</title>
+  }
   <use [attr.href]="iconHref" [attr.xlink:href]="iconHref"></use>
 </svg>

projects/design-angular-kit/src/lib/components/utils/icon/icon.component.ts

@@ -38,6 +38,16 @@ export class ItIconComponent {
    */
   @Input() svgClass: string | undefined;
 
+  /**
+   * Title of the icon
+   */
+  @Input() title: string | undefined;
+
+  /**
+   * Custom Waria label
+   */
+  @Input() labelWaria: string | undefined;
+
   /**
    * Return the icon href
    */
@@ -71,13 +81,12 @@ export class ItIconComponent {
    */
   protected assetBasePath: string;
 
-  /**
-   * Custom Waria label
-   */
-  @Input() labelWaria: string | undefined;
-
   get isAriaHidden(): boolean {
-    return this.labelWaria == undefined;
+    return this.labelWaria == undefined && this.title == undefined;
+  }
+
+  get role(): string {
+    return this.labelWaria == undefined && this.title == undefined ? undefined : 'img';
   }
 
   constructor() {