fix AB#498

src/@batch-flask/ui/activity/activity-monitor-footer-item/activity-monitor-footer-item.html

@@ -3,7 +3,7 @@
         <mat-progress-spinner [diameter]="18" [strokeWidth]="3" mode="indeterminate" color="accent" *ngIf="progress === -1"></mat-progress-spinner>
         <mat-progress-spinner [diameter]="18" [strokeWidth]="3" mode="determinate" color="accent" [value]="progress" *ngIf="progress !== -1"></mat-progress-spinner>
     </div>
-    <i class="fa fa-check" *ngIf="isComplete"></i>
+    <i class="fa fa-check" *ngIf="isComplete" aria-hidden="true"></i>
 </div>
 <span class="name">{{name}}</span>
 <span class="progress-percent">{{progressString}}</span>

src/@batch-flask/ui/activity/activity-monitor/activity-monitor-item/activity-monitor-item-action/activity-monitor-item-action.html

@@ -1,3 +1,3 @@
 <div [ngClass]="{'action-container': true, 'selected': selected || hovered}" title="{{action.title}}" (click)="action.action()" (mouseover)="hover()" (mouseout)="unhover()">
-    <i class="fa {{action.faClass}}"></i>
+    <i class="fa {{action.faClass}}" aria-hidden="true"></i>
 </div>

src/@batch-flask/ui/activity/activity-monitor/activity-monitor-item/activity-monitor-item.html

@@ -1,16 +1,16 @@
 <div class="activity-monitor-item-container" [ngClass]="{'focused': focused, 'hovered': !focused && hovered, 'flash': flash}">
     <div class="item-container" [ngStyle]="{'padding-left': paddingLeft}">
         <div class="icon-container progress-icon">
-            <i class="fa fa-ellipsis-h" *ngIf="status===statusOptions.Pending" title="Pending"></i>
-            <i class="fa fa-spinner fa-pulse" *ngIf="status===statusOptions.InProgress" title="Running"></i>
-            <i class="fa fa-check" *ngIf="status===statusOptions.Completed" title="Completed"></i>
-            <i class="fa fa-times" *ngIf="status===statusOptions.Cancelled" title="Cancelled"></i>
-            <i class="fa fa-exclamation-triangle" *ngIf="status===statusOptions.Failed" title="Failed" (click)="toggleShowError()"></i>
+            <i class="fa fa-ellipsis-h" *ngIf="status===statusOptions.Pending" title="Pending" aria-hidden="true"></i>
+            <i class="fa fa-spinner fa-pulse" *ngIf="status===statusOptions.InProgress" title="Running" aria-hidden="true"></i>
+            <i class="fa fa-check" *ngIf="status===statusOptions.Completed" title="Completed" aria-hidden="true"></i>
+            <i class="fa fa-times" *ngIf="status===statusOptions.Cancelled" title="Cancelled" aria-hidden="true"></i>
+            <i class="fa fa-exclamation-triangle" *ngIf="status===statusOptions.Failed" title="Failed" (click)="toggleShowError()" aria-hidden="true"></i>
         </div>
         <div class="icon-container">
             <div class="expand-icon" *ngIf="activity.subactivities.length" (click)="toggleExpand()">
-                <i class="fa fa-angle-right" title="Expand" *ngIf="!expanded"></i>
-                <i class="fa fa-angle-down" title="Collapse" *ngIf="expanded"></i>
+                <i class="fa fa-angle-right" title="Expand" *ngIf="!expanded" aria-hidden="true"></i>
+                <i class="fa fa-angle-down" title="Collapse" *ngIf="expanded" aria-hidden="true"></i>
             </div>
         </div>
         <div class="activity-info">

src/@batch-flask/ui/activity/activity-monitor/activity-monitor-tree-view/activity-monitor-tree-view.html

@@ -1,7 +1,7 @@
 <bl-toolbar>
     <div toolbarLabel>{{name}}</div>
     <bl-clickable toolbarAction class="clear-all" [title]="xButtonTitle" (do)="xButtonClicked()">
-        <i class="fa fa-times"></i>
+        <i class="fa fa-times" aria-hidden="true"></i>
     </bl-clickable>
 </bl-toolbar>
 <bl-focus-section *ngIf="activities.length > 0"

src/@batch-flask/ui/banner/banner.html

@@ -13,25 +13,25 @@
             <bl-clickable class="btn" (do)="triggerFix()" [ngSwitch]="state" [class.disabled]="state !== errorStates.Error">
                 <span *ngSwitchCase="errorStates.Error">Fix: {{ fixMessage }}</span>
                 <span *ngSwitchCase="errorStates.Fixing">
-                    <i class="fa fa-spinner fa-spin"></i>Fixing
+                    <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>Fixing
                 </span>
                 <span *ngSwitchCase="errorStates.Fixed">
-                    <i class="fa fa-check"></i>Fixed
+                    <i class="fa fa-check" aria-hidden="true"></i>Fixed
                 </span>
             </bl-clickable>
             <bl-clickable class="other-fixes-btn" *ngIf="otherFixes.length !== 0"
                 (mouseenter)="state === errorStates.Error && showOtherFixes = true"
                 (do)="state === errorStates.Error && showOtherFixes = !showOtherFixes"
                 [class.disabled]="state !== errorStates.Error">
-                <i class="fa fa-plus"></i>
+                <i class="fa fa-plus" aria-hidden="true"></i>
             </bl-clickable>
             <div *ngIf="showOtherFixes" class="other-fixes">
                 <bl-clickable *ngFor="let otherFix of otherFixes;trackBy: trackByFn" class="other-fix" (do)="triggerFix(otherFix)">
                     {{otherFix.fixMessage}}
                 </bl-clickable>
             </div>
         </div>
-        <i class="caret fa" [class.fa-caret-left]="!showDetails" [class.fa-caret-down]="showDetails" *ngIf="details.children.length !== 0"></i>
+        <i class="caret fa" [class.fa-caret-left]="!showDetails" [class.fa-caret-down]="showDetails" *ngIf="details.children.length !== 0" aria-hidden="true"></i>
     </bl-clickable>
     <div class="details-container" [hidden]="!showDetails || details.children.length == 0" #details>
         <ng-content select="[details]"></ng-content>

src/@batch-flask/ui/breadcrumbs/breadcrumb/breadcrumb.html

@@ -1,2 +1,2 @@
-<span class="crumb-icon" *ngIf="icon"><i class="fa fa-{{icon}}"></i></span>
+<span class="crumb-icon" *ngIf="icon"><i class="fa fa-{{icon}}" aria-hidden="true"></i></span>
 <span class="crumb-content" [class.invert-ellipsis]="crumb.data.invertName">{{crumb.data.name}}</span>

src/@batch-flask/ui/browse-layout/toggle-filter-button/toggle-filter-button.html

@@ -1,5 +1,5 @@
 <bl-clickable class="toggle-advanced-filter" [title]="title" (do)="toggle()">
-    <i class="fa fa-filter"></i>
+    <i class="fa fa-filter" aria-hidden="true"></i>
     <div class="filtering" *ngIf="hasAdvancedFilter">
         *
     </div>

src/@batch-flask/ui/buttons/button.html

@@ -1,13 +1,13 @@
 <div class="action-btn" [ngClass]="type" title="{{tooltipTitle}}">
     <div [class.hide]="status !== SubmitStatus.Idle" class="label">
-        <i [class]="icon"></i>
+        <i [class]="icon" aria-hidden="true"></i>
         <ng-content></ng-content>
     </div>
     <div class="overlay" [ngSwitch]="status">
-        <i class="fa fa-spinner fa-spin" *ngSwitchCase="SubmitStatus.Submitting"></i>
-        <i class="fa fa-warning" *ngSwitchCase="SubmitStatus.Failed"></i>
+        <i class="fa fa-spinner fa-spin" *ngSwitchCase="SubmitStatus.Submitting" aria-hidden="true"></i>
+        <i class="fa fa-warning" *ngSwitchCase="SubmitStatus.Failed" aria-hidden="true"></i>
         <span class="success-container" *ngSwitchCase="SubmitStatus.Succeeded">
-            <i class="fa fa-check" [@animateSucessIcon]="status === SubmitStatus.Succeeded"></i>
+            <i class="fa fa-check" [@animateSucessIcon]="status === SubmitStatus.Succeeded" aria-hidden="true"></i>
         </span>
     </div>
 </div>

src/@batch-flask/ui/buttons/buttons.component.ts

@@ -15,7 +15,7 @@ export class BaseButton {
     template: `
         <bl-button color="light" type="wide" [action]="action">
             <ng-content *ngIf="!loading"></ng-content>
-            <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
+            <i class="fa fa-spinner fa-spin" *ngIf="loading" aria-hidden="true"></i>
         </bl-button>
     `,
 })
@@ -28,7 +28,7 @@ export class LoadingButtonComponent extends BaseButton {
     selector: "bl-clear-list-selection",
     template: `
         <bl-button color="accent" [action]="onClick" matTooltip="Clear selection">
-            <i class="fa fa-check-square-o"></i>
+            <i class="fa fa-check-square-o" aria-hidden="true"></i>
         </bl-button>
     `,
 })

src/@batch-flask/ui/buttons/refresh-btn/refresh-btn.html

@@ -1,11 +1,11 @@
 <bl-button color="light" [type]="type" [title]="title" [action]="onClick" [disabled]="status !== statuses.Idle" [skipSuccess]="true"
     [tooltipPosition]="tooltipPosition">
     <span class="icon-container" [ngSwitch]="status">
-        <i class="fa fa-refresh shake-hover"    *ngSwitchCase="statuses.Idle"></i>
-        <i class="fa fa-refresh fa-spin"        *ngSwitchCase="statuses.Refreshing"></i>
+        <i class="fa fa-refresh shake-hover"    *ngSwitchCase="statuses.Idle" aria-hidden="true"></i>
+        <i class="fa fa-refresh fa-spin"        *ngSwitchCase="statuses.Refreshing" aria-hidden="true"></i>
         <span class="success-container"         *ngSwitchCase="statuses.Succeeded">
-            <i class="fa fa-check" [@animateSucessIcon]="status === statuses.Succeeded"></i>
+            <i class="fa fa-check" [@animateSucessIcon]="status === statuses.Succeeded" aria-hidden="true"></i>
         </span>
-        <i class="fa fa-warning"                *ngSwitchCase="statuses.Failed"></i>
+        <i class="fa fa-warning"                *ngSwitchCase="statuses.Failed" aria-hidden="true"></i>
     </span>
 </bl-button>

src/@batch-flask/ui/entity-commands-list/button/entity-command-button.html

@@ -5,5 +5,5 @@
     [permission]="command.permission"
     tooltipPosition="above"
     color="light">
-        <i [class]="icon"></i>
+        <i [class]="icon" aria-hidden="true"></i>
 </bl-button>

src/@batch-flask/ui/file/file-explorer/file-explorer-tabs/file-explorer-tabs.html

@@ -1,6 +1,6 @@
 <div class="tablist" role="tablist">
     <bl-clickable role="tab" class="tab main" [class.active]="activePath === null" aria-label="File viewer" title="File viewer" (do)="activateTab(null)">
-        <i class="fa fa-folder"></i>
+        <i class="fa fa-folder" aria-hidden="true"></i>
     </bl-clickable>
     <bl-clickable *ngFor="let tab of tabs;trackBy: trackByFn"
         class="tab"
@@ -11,6 +11,6 @@
         (mouseup)="handleMouseUp($event, tab)">
 
         <span class="name">{{tab.displayName}}</span>
-        <bl-clickable class="tab-close" (do)="closeTab(tab, $event)" title="Close tab" aria-label="Close tab"><i class="fa fa-times close-icon"></i></bl-clickable>
+        <bl-clickable class="tab-close" (do)="closeTab(tab, $event)" title="Close tab" aria-label="Close tab"><i class="fa fa-times close-icon" aria-hidden="true"></i></bl-clickable>
     </bl-clickable>
 </div>

src/@batch-flask/ui/file/file-explorer/file-table-view/file-path-navigator/file-path-navigator.html

@@ -7,7 +7,7 @@
         <span class="file-icon">
             <i class="fa"
                 [class.fa-folder]="path.isDirectory"
-                [class.fa-file]="!path.isDirectory"></i>
+                [class.fa-file]="!path.isDirectory" aria-hidden="true"></i>
         </span>
         {{path.name}}
     </mat-option>

src/@batch-flask/ui/file/file-explorer/file-table-view/file-table-view.html

@@ -1,6 +1,6 @@
 <div class="file-table-view-header">
     <bl-clickable (do)="goBack()" title="Go back" aria-label="Go back" class="go-back">
-        <i class="fa fa-arrow-circle-left"></i>
+        <i class="fa fa-arrow-circle-left" aria-hidden="true"></i>
     </bl-clickable>
 
     <div class="current-path">
@@ -15,7 +15,7 @@
                     <div *blHeadCellDef>Name</div>
                     <div *blCellDef="let treeNode">
                         <span class="icon">
-                            <i class="fa" [class.fa-folder]="treeNode.isDirectory" [class.fa-file]="!treeNode.isDirectory"></i>
+                            <i class="fa" [class.fa-folder]="treeNode.isDirectory" [class.fa-file]="!treeNode.isDirectory" aria-hidden="true"></i>
                         </span>
                         <span>{{treeNode.name}}</span>
                     </div>
@@ -31,13 +31,13 @@
             </bl-table>
 
             <bl-no-item [itemCount]="treeNode.children.size">
-                <i icon class="fa fa-file small"></i>
+                <i icon class="fa fa-file small" aria-hidden="true"></i>
                 <span no-filter>There are no files in this directory</span>
             </bl-no-item>
         </div>
     </bl-loading>
     <div class="flex-separator"></div>
     <div class="drop-hint" *ngIf="canDropExternalFiles">
-        <i class="fa fa-cloud-upload"></i> Drag and drop local files here to upload.
+        <i class="fa fa-cloud-upload" aria-hidden="true"></i> Drag and drop local files here to upload.
     </div>
 </div>

src/@batch-flask/ui/file/file-explorer/file-tree-view/file-tree-view-row/file-tree-view-row.html

@@ -1,10 +1,10 @@
 <span class="caret" (click)="handleCaretClick($event)">
-    <i class="fa" [class.fa-caret-down]="treeRow.expanded" [class.fa-caret-right]="!treeRow.expanded" *ngIf="treeRow.isDirectory"></i>
+    <i class="fa" [class.fa-caret-down]="treeRow.expanded" [class.fa-caret-right]="!treeRow.expanded" *ngIf="treeRow.isDirectory" aria-hidden="true"></i>
 </span>
 <span class="file-icon">
     <i class="fa"
         [class.fa-folder]="treeRow.isDirectory && !treeRow.expanded"
         [class.fa-folder-open]="treeRow.isDirectory &&treeRow.expanded"
-        [class.fa-file]="!treeRow.isDirectory"></i>
+        [class.fa-file]="!treeRow.isDirectory" aria-hidden="true"></i>
 </span>
 <span class="label" [title]="title">{{treeRow.name}}</span>

src/@batch-flask/ui/file/file-explorer/file-tree-view/file-tree-view.html

@@ -1,10 +1,10 @@
 <bl-toolbar class="tree-view-header">
     <bl-clickable toolbarAction class="caret" (do)="toggleExpandTreeView()" [attr.aria-expanded]="expanded" attr.aria-owns="{{id}}-content" aria-label="Toggle tree view">
-        <i class="fa" [class.fa-caret-down]="expanded" [class.fa-caret-right]="!expanded"></i>
+        <i class="fa" [class.fa-caret-down]="expanded" [class.fa-caret-right]="!expanded" aria-hidden="true"></i>
     </bl-clickable>
     <bl-clickable toolbarLabel id="{{id}}_name" class="name" (do)="handleClickTreeViewHeader()">{{name}}</bl-clickable>
     <span toolbarError *ngIf="fileNavigator.error" [title]="fileNavigator.error.code">
-        <i class="fa fa-warning"></i>
+        <i class="fa fa-warning" aria-hidden="true"></i>
     </span>
     <bl-clickable toolbarAction (do)="refresh()" [disabled]="refreshing" class="refresh" [attr.aria-label]="'common.refresh' | i18n">
         <i class="fa fa-refresh action" [attr.title]="'common.refresh' | i18n" *ngIf="!refreshing" aria-hidden="true"></i>

src/@batch-flask/ui/file/file-viewer/file-viewer-container/file-viewer-header/file-viewer-header.html

@@ -15,17 +15,17 @@
     </bl-download-button>
     <bl-button class="open-in-default-app" color="light" [action]="openDefaultEditor" *ngIf="!actionDisabled"
         title="Open in default application" tooltipPosition="above">
-        <i class="fa fa-external-link"></i>
+        <i class="fa fa-external-link" aria-hidden="true"></i>
     </bl-button>
     <bl-button class="save" color="light" [action]="save" title="Save" tooltipPosition="above" *ngIf="canSave"
         [disabled]="actionDisabled">
-        <i class="fa fa-save"></i>
+        <i class="fa fa-save" aria-hidden="true"></i>
         <span class="modified-icon" *ngIf="fileViewer?.modified | async">*</span>
     </bl-button>
     <ng-container *ngIf="fileViewer?.commands && !actionDisabled">
         <bl-button *ngFor="let command of fileViewer?.commands;trackBy: trackCommand" [color]="command.color"  [disabled]="actionDisabled"
             [action]="command.execute" [title]="command.label">
-            <i class="{{command.icon}}"></i>
+            <i class="{{command.icon}}" aria-hidden="true"></i>
         </bl-button>
     </ng-container>
 </div>

src/@batch-flask/ui/file/file-viewer/log-file-viewer/log-file-viewer.html

@@ -1,7 +1,7 @@
 <bl-loading [status]="loadingStatus">
     <div class="log-console">
         <div class="follow-log-btn" [class.following]="followingLog" (click)="toggleFollowLog()">
-            <i class="fa fa-circle"></i>
+            <i class="fa fa-circle" aria-hidden="true"></i>
             <span>Follow log</span>
         </div>
         <div class="log-container">

src/@batch-flask/ui/form/complex-form/footer/form-footer.html

@@ -4,14 +4,14 @@
         [disabled]="classicFormDisabled"
         [title]="'form-footer.buttons.normalForm' |i18n"
         (do)="toggleJsonEditor(false)">
-        <i class="fa fa-commenting"></i>
+        <i class="fa fa-commenting" aria-hidden="true"></i>
     </bl-button>
     <bl-button type="square"
         [attr.aria-pressed]="showJsonEditor"
         [disabled]="showJsonEditor"
         [title]="'form-footer.buttons.jsonEditor' |i18n"
         (do)="toggleJsonEditor(true)">
-        <i class="fa fa-code"></i>
+        <i class="fa fa-code" aria-hidden="true"></i>
     </bl-button>
 </div>
 <div class="toggle-error-btn" *ngIf="error">
@@ -24,7 +24,7 @@
 </div>
 <div class="summary">
     <div *ngIf="waitingForAsyncTask && asyncTasks" class="waiting-for-async-task-message">
-        <i class="fa fa-spinner fa-spin"></i>
+        <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
         <span class="main">Waiting for </span>
         <span class="task">{{asyncTasks[0].name}}</span>
         <span class="main" *ngIf="asyncTasks.length > 1" [matTooltip]="asyncTaskTooltip">and {{asyncTasks.length - 1}} tasks</span>

src/@batch-flask/ui/form/editable-table/editable-table.html

@@ -25,7 +25,7 @@
                 <td class="action-column">
                     <bl-clickable *ngIf="!isLast" class="delete-item-btn" [attr.aria-label]="'editable-table.deleteRow' | i18n"
                         (do)="deleteItem(i)">
-                        <i class="fa fa-times"></i>
+                        <i class="fa fa-times" aria-hidden="true"></i>
                     </bl-clickable>
                 </td>
             </tr>

src/@batch-flask/ui/form/form-picker/form-multi-picker.html

@@ -1,13 +1,13 @@
 <div *ngFor="let value of values;trackBy: trackByFn; let i=index;" class="picked-item">
     <button #button class="form-picker" (click)="openPicker($event, i)" [class.has-value]="value">
         <span *ngIf="!value" class="no-value-content">
-            <i class="fa fa-plus"></i>{{addTitle}}
+            <i class="fa fa-plus" aria-hidden="true"></i>{{addTitle}}
         </span>
         <span *ngIf="value" class="content">
             <div class="details">
                 <ng-template [ngTemplateOutlet]="itemTemplate.template"  [ngTemplateOutletContext]="{$implicit: value}"></ng-template>
             </div>
-            <bl-button type="round" color="light" class="clear-btn" (click)="clearValue($event, i)"><i class="fa fa-times"></i></bl-button>
+            <bl-button type="round" color="light" class="clear-btn" (click)="clearValue($event, i)"><i class="fa fa-times" aria-hidden="true"></i></bl-button>
         </span>
     </button>
 </div>

src/@batch-flask/ui/form/form-picker/form-picker.html

@@ -1,13 +1,13 @@
 <button #button class="form-picker" (click)="openPicker()" [class.has-value]="hasValue">
     <div *ngIf="!hasValue" class="no-value-content">
-        <i class="fa fa-plus"></i> <ng-content select="[no-value-title]"></ng-content>
+        <i class="fa fa-plus" aria-hidden="true"></i> <ng-content select="[no-value-title]"></ng-content>
     </div>
     <div *ngIf="hasValue" class="content">
         <div class="details">
             <div class="title"><ng-content select="[value-title]"></ng-content></div>
             <div class="subtitle"><ng-content select="[value-subtitle]"></ng-content></div>
         </div>
-        <bl-button class="clear-btn"  type="round" color="light" (click)="clearPicker($event)"><i class="fa fa-times"></i></bl-button>
+        <bl-button class="clear-btn"  type="round" color="light" (click)="clearPicker($event)"><i class="fa fa-times" aria-hidden="true"></i></bl-button>
     </div>
 </button>
 <bl-form-page #page [title]="name" [formGroup]="nestedValue" (submit)="nestedFormSubmit()" (cancel)="nestedFormCanceled()">

src/@batch-flask/ui/info-box/info-box.component.ts

@@ -4,7 +4,7 @@ import { Component, Input } from "@angular/core";
     selector: "bl-info-box",
     template: `
         <div class="infobox">
-            <div class="infobox-image"><i class="fa fa-info-circle fa-3"></i></div>
+            <div class="infobox-image"><i class="fa fa-info-circle fa-3" aria-hidden="true"></i></div>
             <div class="infobox-text">{{message}}</div>
         </div>`,
 })

src/@batch-flask/ui/keybindings/keybindings.html

@@ -7,7 +7,7 @@
         <div blFormFieldSuffix>
             <bl-clickable (do)="toggleKeybindingSearch()" class="keybinding-listener-btn"
                 [class.active]="searchByKeyBinding" title="Record keys">
-                <i class="fa fa-keyboard-o"></i>
+                <i class="fa fa-keyboard-o" aria-hidden="true"></i>
             </bl-clickable>
         </div>
     </bl-form-field>
@@ -32,7 +32,7 @@
                     Default
                 </ng-container>
                 <ng-template #userBinding>
-                    User <bl-clickable (do)="removeUserBinding(command.id)" title="Reset to default"><i class="fa fa-undo"></i></bl-clickable>
+                    User <bl-clickable (do)="removeUserBinding(command.id)" title="Reset to default"><i class="fa fa-undo" aria-hidden="true"></i></bl-clickable>
                 </ng-template>
             </div>
         </bl-column>

src/@batch-flask/ui/list-and-show-layout/entity-details-list.html

@@ -10,7 +10,7 @@
             matTooltipPosition="above"
             [routerLink]="baseLink"
             [queryParams]="{filter: true}">
-            <i class="fa fa-filter"></i>
+            <i class="fa fa-filter" aria-hidden="true"></i>
         </bl-clickable>
     </div>
     <div class="actions">