add aria-hidden field to icons

3 years ago · c13f122c4e
16 changed files with 118 additions and 88 deletions
--- 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>
--- 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
+        <i class="fas fa-rocket" aria-hidden="true"></i> Congratulations,
-        successfully running!
+        <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>
--- 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>
--- 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>
--- 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
--- 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>
--- 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
+      <ng-template #loaderRef>
-      >
+        <div class="text-center"><i class="fa fa-pulse fa-spinner" aria-hidden="true"></i></div>
        <div class="text-center"><i class="fa fa-pulse fa-spinner"></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:{
+                    inputs: {
-                      checkboxId:'roles-' + i,
+                      checkboxId: 'roles-' + i,
-                      label:roles[i].name,
+                      label: roles[i].name,
-                      formControl:roleGroup.controls[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: {
+        inputs: {
-        providerName: { value: 'U' },
+          providerName: { value: 'U' },
-        providerKey: { value: providerKey },
+          providerKey: { value: providerKey },
-        visible: { value: visiblePermissions, twoWay: true }
+          visible: { value: visiblePermissions, twoWay: true }
-      },
+        },
-      outputs: { visibleChange: onVisiblePermissionChange },
+        outputs: { visibleChange: onVisiblePermissionChange },
-      componentKey: permissionManagementKey
+        componentKey: permissionManagementKey
-    };
+      };
-    let init = initTemplate
+      let init = initTemplate
-  "
+    "
    [entityDisplayName]="entityDisplayName"
    (abpInit)="init(abpPermissionManagement)"
  >
--- 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(
        `
--- 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">{{
+    <label class="form-label"
-      'AbpSettingManagement::DefaultFromDisplayName' | abpLocalization
+      >{{ 'AbpSettingManagement::DefaultFromDisplayName' | abpLocalization
-      }}<span class="ms-1">*</span></label>
+      }}<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">{{
+    <label class="form-label"
-      'AbpSettingManagement::DefaultFromAddress' | abpLocalization
+      >{{ 'AbpSettingManagement::DefaultFromAddress' | abpLocalization
-      }}<span class="ms-1">*</span></label>
+      }}<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"
+    <input
-      formControlName="smtpUseDefaultCredentials" />
+      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">
+  <button
-    <i class="fa f-send"></i>
+    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"
+    <abp-button
-      [disabled]="emailTestForm.invalid && emailTestForm.dirty">
+      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>
+</abp-modal>
--- 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-success"><i class="fa fa-check" aria-hidden="true"></i></div>'
-      : '<div class="text-danger"><i class="fa fa-times"></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>>) {
--- 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"
--- 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;
--- 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,
--- 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
--- 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 }}
--- 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>