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

apps/browser/src/_locales/en/messages.json

@@ -2,6 +2,9 @@
   "appName": {
     "message": "Bitwarden"
   },
+  "appLogoLabel": {
+    "message": "Bitwarden logo"
+  },
   "extName": {
     "message": "Bitwarden Password Manager",
     "description": "Extension name, MUST be less than 40 characters (Safari restriction)"

apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html

@@ -5,7 +5,12 @@
     [showBackButton]="showBackButton"
     [pageTitle]="''"
   >
-    <bit-icon *ngIf="showLogo" class="tw-inline-flex" [icon]="logo"></bit-icon>
+    <bit-icon
+      *ngIf="showLogo"
+      class="tw-inline-flex"
+      [icon]="logo"
+      [ariaLabel]="'appLogoLabel' | i18n"
+    ></bit-icon>
 
     <ng-container slot="end">
       <app-pop-out></app-pop-out>

apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts

@@ -12,6 +12,7 @@ import {
 } from "@bitwarden/auth/angular";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { Icon, IconModule, Translation } from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
 
 import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
@@ -36,6 +37,7 @@ export interface ExtensionAnonLayoutWrapperData extends AnonLayoutWrapperData {
     AnonLayoutComponent,
     CommonModule,
     CurrentAccountComponent,
+    I18nPipe,
     IconModule,
     PopOutComponent,
     PopupPageComponent,

apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html

@@ -1,6 +1,7 @@
 <div class="tw-mt-10 tw-flex tw-justify-center" *ngIf="loading">
   <div>
-    <bit-icon class="tw-w-72 tw-block tw-mb-4" [icon]="logo"></bit-icon>
+    <bit-icon class="tw-w-72 tw-block tw-mb-4" [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n">
+    </bit-icon>
     <div class="tw-flex tw-justify-center">
       <i
         class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"

apps/web/src/locales/en/messages.json

@@ -2,6 +2,9 @@
   "allApplications": {
     "message": "All applications"
   },
+  "appLogoLabel": {
+    "message": "Bitwarden logo"
+  },
   "criticalApplications": {
     "message": "Critical applications"
   },