From c13f122c4e7a00ec39cdc9339b91c2da7b994dc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?=
 <devbariscanyilmaz@gmail.com>
Date: Wed, 26 Apr 2023 10:00:19 +0300
Subject: [PATCH] add aria-hidden field to icons

---
 .../angular/src/app/home/home.component.html  | 18 ++---
 .../dev-app/src/app/home/home.component.html  | 22 +++---
 .../forgot-password.component.html            |  5 +-
 .../src/lib/components/tree.component.html    |  1 +
 .../feature-management-tab.component.html     |  2 +-
 .../feature-management.component.html         |  2 +
 .../lib/components/users/users.component.html | 43 +++++------
 .../defaults/default-users-entity-props.ts    |  2 +-
 .../email-setting-group.component.html        | 76 ++++++++++++-------
 .../extensible-table.component.ts             |  4 +-
 .../breadcrumb-items.component.html           |  2 +-
 .../lib/components/button/button.component.ts |  4 +-
 .../components/loading/loading.component.ts   |  2 +-
 .../password/password.component.html          |  1 +
 .../lib/components/toast/toast.component.html |  4 +-
 .../angular/src/app/home/home.component.html  | 18 ++---
 16 files changed, 118 insertions(+), 88 deletions(-)

diff --git a/modules/openiddict/app/angular/src/app/home/home.component.html b/modules/openiddict/app/angular/src/app/home/home.component.html
index 817bdacccb..64f1f3312b 100644
--- a/modules/openiddict/app/angular/src/app/home/home.component.html
+++ b/modules/openiddict/app/angular/src/app/home/home.component.html
@@ -2,7 +2,7 @@
   <div class="p-5 text-center">
     <div class="d-inline-block bg-success text-white p-1 h5 rounded mb-4" role="alert">
       <h5 class="m-1">
-        <i class="fas fa-rocket"></i> Congratulations, <strong>BookStore</strong> is
+        <i class="fas fa-rocket" aria-hidden="true"></i> Congratulations, <strong>BookStore</strong> is
         successfully running!
       </h5>
     </div>
@@ -11,7 +11,7 @@
     <p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>
 
     <a *ngIf="!hasLoggedIn" (click)="login()" class="px-4 btn btn-primary ms-1" role="button"
-    ><i class="fa fa-sign-in"></i> {{ 'AbpAccount::Login' | abpLocalization }}</a
+    ><i class="fa fa-sign-in" aria-hidden="true"></i> {{ 'AbpAccount::Login' | abpLocalization }}</a
     >
   </div>
   <div class="card">
@@ -297,13 +297,13 @@
   <div class="mb-5 text-center">
     <p class="align-middle">
       <a href="https://twitter.com/abpframework" target="_blank" class="mx-2"
-      ><i class="fa fa-twitter"></i><span class="text-secondary"> Abp Framework</span></a
+      ><i class="fa fa-twitter" aria-hidden="true"></i><span class="text-secondary"> Abp Framework</span></a
       >
       <a href="https://twitter.com/abpcommercial" target="_blank" class="mx-2"
-      ><i class="fa fa-twitter"></i><span class="text-secondary"> Abp Commercial</span></a
+      ><i class="fa fa-twitter" aria-hidden="true"></i><span class="text-secondary"> Abp Commercial</span></a
       >
       <a href="https://github.com/abpframework/abp" target="_blank" class="mx-2"
-      ><i class="fa fa-github"></i><span class="text-secondary"> abpframework</span></a
+      ><i class="fa fa-github" aria-hidden="true"></i><span class="text-secondary"> abpframework</span></a
       >
     </p>
   </div>
@@ -313,7 +313,7 @@
   <div class="col-lg-4 border-start">
     <div class="p-4">
       <h5 class="mb-3">
-        <i class="fas fa-cubes text-secondary d-block my-3 fa-2x"></i> {{ context.title }}
+        <i class="fas fa-cubes text-secondary d-block my-3 fa-2x" aria-hidden="true"></i> {{ context.title }}
       </h5>
       <p [innerHTML]="context.description"></p>
       <ng-container
@@ -325,7 +325,7 @@
         [href]="link.href"
         target="_blank"
         class="btn btn-link px-1"
-      >{{ link.label }} <i class="fas fa-chevron-right"></i
+      >{{ link.label }} <i class="fas fa-chevron-right" aria-hidden="true"></i
       ></a>
     </div>
   </div>
@@ -335,10 +335,10 @@
   <div class="col-lg-2 border-start">
     <div class="p-3">
       <h6>
-        <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i>
+        <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary" aria-hidden="true"></i>
         <span [innerHTML]="context.title"></span>
         <a [href]="context.href" target="_blank" class="d-block mt-2 btn btn-sm btn-link"
-        >Details <i class="fas fa-chevron-right"></i
+        >Details <i class="fas fa-chevron-right" aria-hidden="true"></i
         ></a>
       </h6>
     </div>
diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
index 7024ab69e5..230f11f60a 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
@@ -2,8 +2,8 @@
   <div class="p-5 text-center">
     <div class="d-inline-block bg-success text-white p-1 h5 rounded mb-4" role="alert">
       <h5 class="m-1">
-        <i class="fas fa-rocket"></i> Congratulations, <strong>MyProjectName</strong> is
-        successfully running!
+        <i class="fas fa-rocket" aria-hidden="true"></i> Congratulations,
+        <strong>MyProjectName</strong> is successfully running!
       </h5>
     </div>
     <h1>{{ '::Welcome' | abpLocalization }}</h1>
@@ -276,13 +276,16 @@
   <div class="mb-5 text-center">
     <p class="align-middle">
       <a href="https://twitter.com/abpframework" target="_blank" class="mx-2"
-        ><i class="fa fa-twitter"></i><span class="text-secondary"> Abp Framework</span></a
+        ><i class="fa fa-twitter" aria-hidden="true"></i
+        ><span class="text-secondary"> Abp Framework</span></a
       >
       <a href="https://twitter.com/abpcommercial" target="_blank" class="mx-2"
-        ><i class="fa fa-twitter"></i><span class="text-secondary"> Abp Commercial</span></a
+        ><i class="fa fa-twitter" aria-hidden="true"></i
+        ><span class="text-secondary"> Abp Commercial</span></a
       >
       <a href="https://github.com/abpframework/abp" target="_blank" class="mx-2"
-        ><i class="fa fa-github"></i><span class="text-secondary"> abpframework</span></a
+        ><i class="fa fa-github" aria-hidden="true"></i
+        ><span class="text-secondary"> abpframework</span></a
       >
     </p>
   </div>
@@ -292,7 +295,8 @@
   <div class="col-lg-4 border-left">
     <div class="p-4">
       <h5 class="mb-3">
-        <i class="fas fa-cubes text-secondary d-block my-3 fa-2x"></i> {{ context.title }}
+        <i class="fas fa-cubes text-secondary d-block my-3 fa-2x" aria-hidden="true"></i>
+        {{ context.title }}
       </h5>
       <p [innerHTML]="context.description"></p>
       <ng-container
@@ -304,7 +308,7 @@
         [href]="link.href"
         target="_blank"
         class="btn btn-link px-1"
-        >{{ link.label }} <i class="fas fa-chevron-right"></i
+        >{{ link.label }} <i class="fas fa-chevron-right" aria-hidden="true"></i
       ></a>
     </div>
   </div>
@@ -314,10 +318,10 @@
   <div class="col-lg-2 border-left">
     <div class="p-3">
       <h6>
-        <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i>
+        <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary" aria-hidden="true"></i>
         <span [innerHTML]="context.title"></span>
         <a [href]="context.href" target="_blank" class="d-block mt-2 btn btn-sm btn-link"
-          >Details <i class="fas fa-chevron-right"></i
+          >Details <i class="fas fa-chevron-right" aria-hidden="true"></i
         ></a>
       </h6>
     </div>
diff --git a/npm/ng-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.html b/npm/ng-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.html
index 1db582c942..7fd02e7a0b 100644
--- a/npm/ng-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.html
@@ -24,7 +24,8 @@
     {{ 'AbpAccount::Submit' | abpLocalization }}
   </abp-button>
   <a routerLink="/account/login"
-    ><i class="fa fa-long-arrow-left me-1"></i>{{ 'AbpAccount::Login' | abpLocalization }}</a
+    ><i class="fa fa-long-arrow-left me-1" aria-hidden="true"></i
+    >{{ 'AbpAccount::Login' | abpLocalization }}</a
   >
 </form>
 
@@ -35,7 +36,7 @@
 
   <a routerLink="/account/login">
     <button class="d-block mt-2 mb-3 btn btn-primary btn-block">
-      <i class="fa fa-long-arrow-left me-1"></i>
+      <i class="fa fa-long-arrow-left me-1" aria-hidden="true"></i>
       {{ 'AbpAccount::BackToLogin' | abpLocalization }}
     </button>
   </a>
diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
index 1ae9fec1d3..f8406655ff 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
@@ -45,6 +45,7 @@
           class="fas fa-caret-down text-muted"
           ngbDropdownToggle
           [class.dropdown-toggle]="false"
+          aria-hidden="true"
         ></i>
         <div ngbDropdownMenu>
           <ng-template *ngTemplateOutlet="menu; context: { $implicit: node }"></ng-template>
diff --git a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.html b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.html
index 9a5f744dce..cfd49602b6 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.html
+++ b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management-tab/feature-management-tab.component.html
@@ -1,7 +1,7 @@
 <p class="text-wrap">{{ 'AbpFeatureManagement::ManageHostFeaturesText' | abpLocalization }}</p>
 
 <button class="btn btn-primary" type="button" (click)="openFeaturesModal()">
-  <i class="fa fa-cog"></i>
+  <i class="fa fa-cog" aria-hidden="true"></i>
   {{ 'AbpFeatureManagement::ManageHostFeatures' | abpLocalization }}
 </button>
 <abp-feature-management
diff --git a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html
index 8927ee6cb2..2e4e28fea8 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html
+++ b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html
@@ -122,6 +122,7 @@
       iconClass="fa fa-refresh"
       [disabled]="modalBusy"
       (click)="resetToDefault()"
+      aria-hidden="true"
     >
       {{ 'AbpFeatureManagement::ResetToDefault' | abpLocalization }}
     </abp-button>
@@ -134,6 +135,7 @@
       iconClass="fa fa-check"
       [disabled]="modalBusy"
       (click)="save()"
+      aria-hidden="true"
     >
       {{ 'AbpFeatureManagement::Save' | abpLocalization }}
     </abp-button>
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
index eaf21949f3..fd38cc2a28 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
@@ -1,5 +1,4 @@
 <abp-page [title]="'AbpIdentity::Users' | abpLocalization" [toolbar]="data.items">
-
   <div id="identity-roles-wrapper" class="card">
     <div class="card-body">
       <div id="data-tables-table-filter" class="data-tables-filter mb-3">
@@ -27,10 +26,8 @@
     </ng-template>
 
     <ng-template #abpBody>
-      <ng-template #loaderRef
-      >
-        <div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div
-        >
+      <ng-template #loaderRef>
+        <div class="text-center"><i class="fa fa-pulse fa-spinner" aria-hidden="true"></i></div>
       </ng-template>
 
       <form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">
@@ -49,15 +46,15 @@
                 *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
                 class="form-check mb-2"
               >
-                <abp-checkbox 
+                <abp-checkbox
                   *abpReplaceableTemplate="{
-                    inputs:{
-                      checkboxId:'roles-' + i,
-                      label:roles[i].name,
-                      formControl:roleGroup.controls[roles[i].name]
+                    inputs: {
+                      checkboxId: 'roles-' + i,
+                      label: roles[i].name,
+                      formControl: roleGroup.controls[roles[i].name]
                     },
                     componentKey: inputKey
-                  }" 
+                  }"
                   [checkboxId]="'roles-' + i"
                   [formControl]="roleGroup.controls[roles[i].name]"
                   [label]="roles[i].name"
@@ -77,24 +74,24 @@
       </button>
       <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{
         'AbpIdentity::Save' | abpLocalization
-        }}</abp-button>
+      }}</abp-button>
     </ng-template>
   </abp-modal>
 
   <abp-permission-management
     #abpPermissionManagement="abpPermissionManagement"
     *abpReplaceableTemplate="
-    {
-      inputs: {
-        providerName: { value: 'U' },
-        providerKey: { value: providerKey },
-        visible: { value: visiblePermissions, twoWay: true }
-      },
-      outputs: { visibleChange: onVisiblePermissionChange },
-      componentKey: permissionManagementKey
-    };
-    let init = initTemplate
-  "
+      {
+        inputs: {
+          providerName: { value: 'U' },
+          providerKey: { value: providerKey },
+          visible: { value: visiblePermissions, twoWay: true }
+        },
+        outputs: { visibleChange: onVisiblePermissionChange },
+        componentKey: permissionManagementKey
+      };
+      let init = initTemplate
+    "
     [entityDisplayName]="entityDisplayName"
     (abpInit)="init(abpPermissionManagement)"
   >
diff --git a/npm/ng-packs/packages/identity/src/lib/defaults/default-users-entity-props.ts b/npm/ng-packs/packages/identity/src/lib/defaults/default-users-entity-props.ts
index 407d92662b..da277acd6c 100644
--- a/npm/ng-packs/packages/identity/src/lib/defaults/default-users-entity-props.ts
+++ b/npm/ng-packs/packages/identity/src/lib/defaults/default-users-entity-props.ts
@@ -16,7 +16,7 @@ export const DEFAULT_USERS_ENTITY_PROPS = EntityProp.createMany<IdentityUserDto>
 
       const inactiveIcon = `<i title="${t(
         'AbpIdentity::ThisUserIsNotActiveMessage',
-      )}" class="fas fa-ban text-danger me-1"></i>`;
+      )}" class="fas fa-ban text-danger me-1" aria-hidden="true"></i>`;
 
       return of(
         `
diff --git a/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.html b/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.html
index 2219cc4bd8..1baa5c5ff4 100644
--- a/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.html
+++ b/npm/ng-packs/packages/setting-management/config/src/lib/components/email-setting-group/email-setting-group.component.html
@@ -4,15 +4,17 @@
 
 <form *ngIf="form" [formGroup]="form" (ngSubmit)="submit()" [validateOnSubmit]="true">
   <div class="mb-3 form-group">
-    <label class="form-label">{{
-      'AbpSettingManagement::DefaultFromDisplayName' | abpLocalization
-      }}<span class="ms-1">*</span></label>
+    <label class="form-label"
+      >{{ 'AbpSettingManagement::DefaultFromDisplayName' | abpLocalization
+      }}<span class="ms-1">*</span></label
+    >
     <input type="text" class="form-control" formControlName="defaultFromDisplayName" />
   </div>
   <div class="mb-3 form-group">
-    <label class="form-label">{{
-      'AbpSettingManagement::DefaultFromAddress' | abpLocalization
-      }}<span class="ms-1">*</span></label>
+    <label class="form-label"
+      >{{ 'AbpSettingManagement::DefaultFromAddress' | abpLocalization
+      }}<span class="ms-1">*</span></label
+    >
     <input type="text" class="form-control" formControlName="defaultFromAddress" />
   </div>
   <div class="mb-3 form-group">
@@ -20,28 +22,41 @@
     <input type="text" class="form-control" formControlName="smtpHost" />
   </div>
   <div class="mb-3 form-group">
-    <label class="form-label">{{ 'AbpSettingManagement::SmtpPort' | abpLocalization }}<span class="ms-1">*</span></label>
+    <label class="form-label"
+      >{{ 'AbpSettingManagement::SmtpPort' | abpLocalization }}<span class="ms-1">*</span></label
+    >
     <input type="number" class="form-control" formControlName="smtpPort" />
   </div>
 
   <div class="form-check mb-2">
-    <input type="checkbox" id="smtp-enable-ssl" class="form-check-input" formControlName="smtpEnableSsl" />
+    <input
+      type="checkbox"
+      id="smtp-enable-ssl"
+      class="form-check-input"
+      formControlName="smtpEnableSsl"
+    />
     <label class="form-check-label" for="smtp-enable-ssl">{{
       'AbpSettingManagement::SmtpEnableSsl' | abpLocalization
-      }}</label>
+    }}</label>
   </div>
   <div class="form-check mb-2">
-    <input type="checkbox" id="smtp-use-default-credentials" class="form-check-input"
-      formControlName="smtpUseDefaultCredentials" />
+    <input
+      type="checkbox"
+      id="smtp-use-default-credentials"
+      class="form-check-input"
+      formControlName="smtpUseDefaultCredentials"
+    />
     <label class="form-check-label" for="smtp-use-default-credentials">{{
       'AbpSettingManagement::SmtpUseDefaultCredentials' | abpLocalization
-      }}</label>
+    }}</label>
   </div>
 
-  <div [@collapse]="{
+  <div
+    [@collapse]="{
       value: form.get('smtpUseDefaultCredentials')?.value ? 'collapsed' : 'expanded',
       params: { time: '200ms', easing: 'linear' }
-    }">
+    }"
+  >
     <div class="mb-3 form-group">
       <label class="form-label">{{ 'AbpSettingManagement::SmtpDomain' | abpLocalization }}</label>
       <input type="text" class="form-control" formControlName="smtpDomain" />
@@ -63,37 +78,43 @@
   <button type="submit" class="btn btn-primary">
     {{ 'AbpSettingManagement::Save' | abpLocalization }}
   </button>
-  <button type="button" (click)="openSendEmailModal()" class="btn btn-primary mx-2" *abpPermission="emailingPolicy">
-    <i class="fa f-send"></i>
+  <button
+    type="button"
+    (click)="openSendEmailModal()"
+    class="btn btn-primary mx-2"
+    *abpPermission="emailingPolicy"
+  >
+    <i class="fa f-send" aria-hidden="true"></i>
     {{ 'AbpSettingManagement::SendTestEmail' | abpLocalization }}
   </button>
 </form>
 
 <abp-modal [(visible)]="isEmailTestModalOpen" [options]="modalSize">
   <ng-template #abpHeader>
-    <h3>{{"SendTestEmail" | abpLocalization}}</h3>
+    <h3>{{ 'SendTestEmail' | abpLocalization }}</h3>
   </ng-template>
 
   <ng-template #abpBody>
     <form [formGroup]="emailTestForm" id="emailTestForm" (ngSubmit)="emailTestFormSubmit()">
-
       <div class="mb-3 form-group">
-        <label class="form-label">{{ 'AbpSettingManagement::SenderEmailAddress' | abpLocalization }}</label>
+        <label class="form-label">{{
+          'AbpSettingManagement::SenderEmailAddress' | abpLocalization
+        }}</label>
         <input class="form-control" formControlName="senderEmailAddress" />
       </div>
 
       <div class="mb-3 form-group">
-        <label class="form-label">{{ 'AbpSettingManagement::TargetEmailAddress' | abpLocalization }}</label>
+        <label class="form-label">{{
+          'AbpSettingManagement::TargetEmailAddress' | abpLocalization
+        }}</label>
         <input class="form-control" formControlName="targetEmailAddress" />
       </div>
 
-
       <div class="mb-3 form-group">
         <label class="form-label">{{ 'AbpSettingManagement::Subject' | abpLocalization }}</label>
         <input class="form-control" formControlName="subject" />
       </div>
 
-
       <div class="mb-3 form-group">
         <label class="form-label">{{ 'AbpSettingManagement::Body' | abpLocalization }}</label>
         <textarea class="form-control" formControlName="body"></textarea>
@@ -101,13 +122,16 @@
     </form>
   </ng-template>
 
-
   <ng-template #abpFooter>
-    <abp-button buttonType="submit" iconClass="fa fa-send" formName="emailTestForm"
-      [disabled]="emailTestForm.invalid && emailTestForm.dirty">
+    <abp-button
+      buttonType="submit"
+      iconClass="fa fa-send"
+      formName="emailTestForm"
+      [disabled]="emailTestForm.invalid && emailTestForm.dirty"
+    >
       <span>{{ 'AbpTenantManagement::Send' | abpLocalization }}</span>
     </abp-button>
 
     <button type="button" class="btn btn-secondary" abpClose>Close</button>
   </ng-template>
-</abp-modal>
\ No newline at end of file
+</abp-modal>
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts
index 6028e7e3ac..a0e5694f68 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts
@@ -116,8 +116,8 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
 
   private getIcon(value: boolean) {
     return value
-      ? '<div class="text-success"><i class="fa fa-check"></i></div>'
-      : '<div class="text-danger"><i class="fa fa-times"></i></div>';
+      ? '<div class="text-success"><i class="fa fa-check" aria-hidden="true"></i></div>'
+      : '<div class="text-danger"><i class="fa fa-times" aria-hidden="true"></i></div>';
   }
 
   private getEnum(rowValue: any, list: Array<ABP.Option<any>>) {
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.html
index b4c45b7a17..598f3638a5 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.html
@@ -1,6 +1,6 @@
 <ol class="breadcrumb" *ngIf="items.length">
   <li class="breadcrumb-item">
-    <a routerLink="/"><i class="fa fa-home"></i> </a>
+    <a routerLink="/"><i class="fa fa-home" aria-hidden="true"></i> </a>
   </li>
   <li
     *ngFor="let item of items; let last = last"
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
index 77a00be6bc..48fe2d5c28 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
@@ -25,7 +25,7 @@ import {
       (focus)="focus.next($event); abpFocus.next($event)"
       (blur)="blur.next($event); abpBlur.next($event)"
     >
-      <i [ngClass]="icon" class="me-1"></i><ng-content></ng-content>
+      <i [ngClass]="icon" class="me-1" aria-hidden="true"></i><ng-content></ng-content>
     </button>
   `,
 })
@@ -38,7 +38,7 @@ export class ButtonComponent implements OnInit {
 
   @Input()
   buttonType = 'button';
-  
+
   @Input()
   formName?: string = undefined;
 
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loading/loading.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loading/loading.component.ts
index d923a43998..7aa6673553 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/loading/loading.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loading/loading.component.ts
@@ -4,7 +4,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
   selector: 'abp-loading',
   template: `
     <div class="abp-loading">
-      <i class="fa fa-spinner fa-pulse abp-spinner"></i>
+      <i class="fa fa-spinner fa-pulse abp-spinner" aria-hidden="true"></i>
     </div>
   `,
   encapsulation: ViewEncapsulation.None,
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.html
index b3ef2b68f4..fe1c9c51ce 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.html
@@ -9,6 +9,7 @@
   <button class="btn btn-secondary" type="button" (click)="toggleFieldTextType()">
     <i
       class="fa"
+      aria-hidden="true"
       [ngClass]="{
         'fa-eye-slash': !fieldTextType,
         'fa-eye': fieldTextType
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html
index 25db3a12e0..5e6902ed27 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html
@@ -1,10 +1,10 @@
 <div class="abp-toast" [ngClass]="severityClass" (click)="tap()">
   <div class="abp-toast-icon">
-    <i class="fa icon" [ngClass]="iconClass"></i>
+    <i class="fa icon" [ngClass]="iconClass" aria-hidden="true"></i>
   </div>
   <div class="abp-toast-content">
     <button class="abp-toast-close-button" (click)="close()" *ngIf="toast.options?.closable">
-      <i class="fa fa-times"></i>
+      <i class="fa fa-times" aria-hidden="true"></i>
     </button>
     <div class="abp-toast-title">
       {{ toast.title | abpLocalization: toast.options?.titleLocalizationParams }}
diff --git a/templates/app/angular/src/app/home/home.component.html b/templates/app/angular/src/app/home/home.component.html
index 3d8c3db65d..703bc00e58 100644
--- a/templates/app/angular/src/app/home/home.component.html
+++ b/templates/app/angular/src/app/home/home.component.html
@@ -2,7 +2,7 @@
   <div class="p-5 text-center">
     <div class="d-inline-block bg-success text-white p-1 h5 rounded mb-4" role="alert">
       <h5 class="m-1">
-        <i class="fas fa-rocket"></i> Congratulations, <strong>MyProjectName</strong> is
+        <i class="fas fa-rocket" aria-hidden="true"></i> Congratulations, <strong>MyProjectName</strong> is
         successfully running!
       </h5>
     </div>
@@ -11,7 +11,7 @@
     <p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>
 
     <a *ngIf="!hasLoggedIn" (click)="login()" class="px-4 btn btn-primary ms-1" role="button"
-    ><i class="fa fa-sign-in"></i> {{ 'AbpAccount::Login' | abpLocalization }}</a
+    ><i class="fa fa-sign-in" aria-hidden="true"></i> {{ 'AbpAccount::Login' | abpLocalization }}</a
     >
   </div>
   <div class="card">
@@ -297,13 +297,13 @@
   <div class="mb-5 text-center">
     <p class="align-middle">
       <a href="https://twitter.com/abpframework" target="_blank" class="mx-2"
-      ><i class="fa fa-twitter"></i><span class="text-secondary"> Abp Framework</span></a
+      ><i class="fa fa-twitter" aria-hidden="true"></i><span class="text-secondary"> Abp Framework</span></a
       >
       <a href="https://twitter.com/abpcommercial" target="_blank" class="mx-2"
-      ><i class="fa fa-twitter"></i><span class="text-secondary"> Abp Commercial</span></a
+      ><i class="fa fa-twitter" aria-hidden="true"></i><span class="text-secondary"> Abp Commercial</span></a
       >
       <a href="https://github.com/abpframework/abp" target="_blank" class="mx-2"
-      ><i class="fa fa-github"></i><span class="text-secondary"> abpframework</span></a
+      ><i class="fa fa-github" aria-hidden="true"></i><span class="text-secondary"> abpframework</span></a
       >
     </p>
   </div>
@@ -313,7 +313,7 @@
   <div class="col-lg-4 border-start">
     <div class="p-4">
       <h5 class="mb-3">
-        <i class="fas fa-cubes text-secondary d-block my-3 fa-2x"></i> {{ context.title }}
+        <i class="fas fa-cubes text-secondary d-block my-3 fa-2x" aria-hidden="true"></i> {{ context.title }}
       </h5>
       <p [innerHTML]="context.description"></p>
       <ng-container
@@ -325,7 +325,7 @@
         [href]="link.href"
         target="_blank"
         class="btn btn-link px-1"
-      >{{ link.label }} <i class="fas fa-chevron-right"></i
+      >{{ link.label }} <i class="fas fa-chevron-right" aria-hidden="true"></i
       ></a>
     </div>
   </div>
@@ -335,10 +335,10 @@
   <div class="col-lg-2 border-start">
     <div class="p-3">
       <h6>
-        <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i>
+        <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary" aria-hidden="true"></i>
         <span [innerHTML]="context.title"></span>
         <a [href]="context.href" target="_blank" class="d-block mt-2 btn btn-sm btn-link"
-        >Details <i class="fas fa-chevron-right"></i
+        >Details <i class="fas fa-chevron-right" aria-hidden="true"></i
         ></a>
       </h6>
     </div>