Hide bit-icon component from screen readers by default (#14295)

* adds aria-hidden to bit-icon when no aria-label provided

* add ariaLabel to logo svg usages

* add ariaLabel documentation

* default ariaLable value to undefined

* add logo label to translations

* adds i18n pipe to component

* Add binding to example docs

libs/auth/src/angular/anon-layout/anon-layout.component.html

@@ -10,7 +10,7 @@
     [routerLink]="['/']"
     class="tw-w-[128px] tw-block tw-mb-12 [&>*]:tw-align-top"
   >
-    <bit-icon [icon]="logo"></bit-icon>
+    <bit-icon [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
   </a>
 
   <div

libs/components/src/icon/icon.component.ts

@@ -1,19 +1,23 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { Component, HostBinding, Input } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
 
 import { Icon, isIcon } from "./icon";
 
 @Component({
   selector: "bit-icon",
+  host: {
+    "[attr.aria-hidden]": "!ariaLabel",
+    "[attr.aria-label]": "ariaLabel",
+    "[innerHtml]": "innerHtml",
+  },
   template: ``,
   standalone: true,
 })
 export class BitIconComponent {
+  innerHtml: SafeHtml | null = null;
+
   @Input() set icon(icon: Icon) {
     if (!isIcon(icon)) {
-      this.innerHtml = "";
       return;
     }
 
@@ -21,7 +25,7 @@ export class BitIconComponent {
     this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(svg);
   }
 
-  @HostBinding() innerHtml: SafeHtml;
+  @Input() ariaLabel: string | undefined = undefined;
 
   constructor(private domSanitizer: DomSanitizer) {}
 }

libs/components/src/icon/icon.mdx

@@ -98,9 +98,19 @@ import * as stories from "./icon.stories";
        ```
 
      - **HTML:**
+
+       > NOTE: SVG icons are treated as decorative by default and will be `aria-hidden` unless an
+       > `ariaLabel` is explicitly provided to the `<bit-icon>` component
+
        ```html
        <bit-icon [icon]="Icons.ExampleIcon"></bit-icon>
        ```
 
+       With `ariaLabel`
+
+       ```html
+       <bit-icon [icon]="Icons.ExampleIcon" [ariaLabel]="Your custom label text here"></bit-icon>
+       ```
+
 8. **Ensure your SVG renders properly** according to Figma in both light and dark modes on a client
    which supports multiple style modes.

libs/components/src/icon/icon.stories.ts

@@ -26,5 +26,9 @@ export const Default: Story = {
       mapping: GenericIcons,
       control: { type: "select" },
     },
+    ariaLabel: {
+      control: "text",
+      description: "the text used by a screen reader to describe the icon",
+    },
   },
 };