Fix screen reader and contrast accessibility issues in cds-ui 76/143676/2
authorFiete Ostkamp <fiete.ostkamp@telekom.de>
Wed, 25 Mar 2026 14:07:14 +0000 (15:07 +0100)
committerFiete Ostkamp <fiete.ostkamp@telekom.de>
Wed, 25 Mar 2026 14:11:55 +0000 (15:11 +0100)
- make sure that all font-icons are `aria-hidden`="true" and have
  an alternative label that conveys the same semantic meaning than the icon
- fix contrast issues

Issue-ID: CCSDK-4188
Change-Id: Id70a0801ba890a3bb0208a12d02a673f74e9c2ca
Signed-off-by: Fiete Ostkamp <fiete.ostkamp@telekom.de>
29 files changed:
cds-ui/client/src/app/feature-modules/blueprint/deploy-template/deploy-template.component.html
cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html
cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss
cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-from-database/search-from-database.component.html
cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss
cds-ui/client/src/app/feature-modules/controller-catalog/search-catalog/search-catalog.component.html
cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/existing-model/search-resource/search-resource.component.html
cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html
cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss
cds-ui/client/src/styles.scss
cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-dashboard/execution-dashboard.component.html
cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-history/execution-history.component.html
cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-setup/execution-setup.component.css
cds-ui/designer-client/src/app/modules/feature-modules/execution/execution-setup/execution-setup.component.html
cds-ui/designer-client/src/app/modules/feature-modules/execution/live-view/live-view.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/source-view/source-view.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html
cds-ui/designer-client/src/app/modules/shared-modules/header/header.component.html
cds-ui/designer-client/src/styles.css

index 739ef04..526c61d 100644 (file)
@@ -31,7 +31,7 @@ limitations under the License.
     <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
       <button mat-icon-button matTreeNodeToggle
               [attr.aria-label]="'toggle ' + node.name">
-        <mat-icon class="mat-icon-rtl-mirror">
+        <mat-icon class="mat-icon-rtl-mirror" aria-hidden="true">
           {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
         </mat-icon>
       </button>
index 6424d3f..1bfe4d3 100644 (file)
@@ -22,9 +22,9 @@ limitations under the License.
         <!-- <div style="width:inherit; height: inherit; position: fixed;z-index: 1; background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);"></div> -->
         <div style="display: flex;">
             <div>
-                <i class="fa fa-folder delete-add-file" aria-hidden="true" [ngClass]="{'fa-disabled': selectedFileObj.type == 'file' || selectedFileObj.type == ''}" (click)="enableNameInputEl('createFolder')"></i>
-                <i class="fa fa-file add-file" aria-hidden="true" [ngClass]="{'fa-disabled' : selectedFileObj.type == 'file' ||selectedFileObj.type == ''}" (click)="enableNameInputEl('createFile')"></i>
-                <i class="fa fa-trash delete-add-file" aria-hidden="true" [ngClass]="{'fa-disabled' : selectedFileObj.type == ''}" (click)="deleteFolderOrFile('deleteFile')"></i>
+                <button aria-label="Create folder" class="btn btn-sm" [ngClass]="{'fa-disabled': selectedFileObj.type == 'file' || selectedFileObj.type == ''}" (click)="enableNameInputEl('createFolder')"><i class="fa fa-folder delete-add-file" aria-hidden="true"></i></button>
+                <button aria-label="Create file" class="btn btn-sm" [ngClass]="{'fa-disabled' : selectedFileObj.type == 'file' ||selectedFileObj.type == ''}" (click)="enableNameInputEl('createFile')"><i class="fa fa-file add-file" aria-hidden="true"></i></button>
+                <button aria-label="Delete" class="btn btn-sm" [ngClass]="{'fa-disabled' : selectedFileObj.type == ''}" (click)="deleteFolderOrFile('deleteFile')"><i class="fa fa-trash delete-add-file" aria-hidden="true"></i></button>
             </div>
             <div>
                 <input *ngIf="isNameTextboxEnablled" type="text" (focusout)="createFolderOrFile($event)" />
@@ -37,7 +37,7 @@ limitations under the License.
             </mat-tree-node>
             <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="selectFolder(node);activeNode = node" [ngClass]="{ 'background-highlight': activeNode === node }">
                 <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
-                <mat-icon class="mat-icon-rtl-mirror">
+                <mat-icon class="mat-icon-rtl-mirror" aria-hidden="true">
                   {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                 </mat-icon>
               </button>
@@ -49,7 +49,7 @@ limitations under the License.
         <!-- <i class="fa fa-save save-icon" style="font-size:24px" (click)="updateBlueprint()"></i>
         <ace-editor [(text)]="text" [(mode)]="mode" #editor class="aceEditor"></ace-editor> -->
         <div class="normal-editor-mode" [ngClass]="{ 'resource-mapping-mode': viewTemplateMode}">
-            <i class="fa fa-save save-icon" style="font-size:24px" (click)="saveEditedChanges()"></i>
+            <button aria-label="Save changes" class="btn btn-sm" (click)="saveEditedChanges()"><i class="fa fa-save save-icon" style="font-size:24px" aria-hidden="true"></i></button>
             <ace-editor [(text)]="text" [(mode)]="mode" [(readOnly)]="editorReadOnly" #editor class="aceEditor"></ace-editor>
         </div>
         <button *ngIf="viewTemplateMode" class="btn-active" (click)="loadConfigParams()">Load Config Parameters</button>
@@ -59,4 +59,4 @@ limitations under the License.
         </div>
     </div>
 
-</div>
\ No newline at end of file
+</div>
index 609d6fa..3730612 100644 (file)
@@ -21,8 +21,8 @@ limitations under the License.
 
 
 .modifyTemp {
-    display: flex; 
-    flex-direction: row; 
+    display: flex;
+    flex-direction: row;
     height: 524px;
     width: 100%
 }
@@ -69,12 +69,12 @@ limitations under the License.
 }
 
 .mat-button-disablled {
-    background-color: #c5cae8 !important;
+    background-color: #9fa8da !important;
     border-radius: 4px;
-    color: darkgray !important;
+    color: #616161 !important;
     line-height: none !important;
     margin: 0.5em;
     // padding: 0.5em;
     min-width: 6em;
     cursor: initial;
-}
\ No newline at end of file
+}
index 5c84351..a1c1d3f 100644 (file)
@@ -22,8 +22,8 @@ limitations under the License.
     <mat-form-field class="search-full-width">
         <!-- <input #resourceSelect type="text" [(ngModel)]="searchText" placeholder="Search Resources" matInput [matAutocomplete]="auto" formControlName="search_input"> -->
         <input matInput type="text" [(ngModel)]="searchText" placeholder="Search Resources" formControlName="search_input">
-        <button matSuffix mat-icon-button (click)="fetchResourceByName()">
-      <mat-icon>search</mat-icon>
+        <button matSuffix mat-icon-button (click)="fetchResourceByName()" aria-label="Search">
+      <mat-icon aria-hidden="true">search</mat-icon>
     </button>
         <!-- <mat-autocomplete #auto="matAutocomplete">
       <mat-option (click)="selected(option)" *ngFor="let option of options" [value]="option.tags">
@@ -62,4 +62,4 @@ limitations under the License.
             </mat-card-actions>
         </mat-card>
     </mat-grid-tile>
-</mat-grid-list> -->
\ No newline at end of file
+</mat-grid-list> -->
index beb05e2..6c9de29 100644 (file)
@@ -31,12 +31,12 @@ limitations under the License.
 }
 
 .mat-upload-btn-disabled {
-    background-color: #c5cae8;
+    background-color: #9fa8da;
     margin-top: 10px;
     border-radius: 4px;
     margin-bottom: 5px;
-    color: darkgray;
+    color: #616161;
     min-width: 6em;
     border: none;
     cursor: initial;
-}
\ No newline at end of file
+}
index ed963a6..70aadee 100644 (file)
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============LICENSE_END=========================================================
-*/--> 
+*/-->
 <form class="search-form" [formGroup]="myControl">
   <mat-form-field class="search-full-width">
       <input matInput type="text" placeholder="Search Catalog" formControlName="search_input" #searchText>
-      <button matSuffix mat-icon-button (click)="fetchCatalogByName(searchText.value)">
-    <mat-icon>search</mat-icon>
+      <button matSuffix mat-icon-button (click)="fetchCatalogByName(searchText.value)" aria-label="Search">
+    <mat-icon aria-hidden="true">search</mat-icon>
   </button>
   </mat-form-field>
 </form>
@@ -41,4 +41,4 @@
           </mat-card>
       </div>
   </div>
-</div>
\ No newline at end of file
+</div>
index fe1c92c..936035a 100644 (file)
@@ -23,7 +23,7 @@
 <form class="example-form" [formGroup]="myControl">
   <mat-form-field class="example-full-width">
     <input #resourceSelect type="text" [(ngModel)]="searchText" placeholder="Search Resources" matInput [matAutocomplete]="auto" formControlName="search_input">
-    <button matSuffix mat-icon-button (click)="fetchResourceByName()"><mat-icon>search</mat-icon></button>
+    <button matSuffix mat-icon-button (click)="fetchResourceByName()" aria-label="Search"><mat-icon aria-hidden="true">search</mat-icon></button>
     <mat-autocomplete #auto="matAutocomplete">
       <mat-option (click)="selected(option)" *ngFor="let option of options | search : searchText" [value]="option.tags">
         {{option.tags}}
index 2004e48..3bd0c74 100644 (file)
@@ -35,7 +35,7 @@
                        </mat-expansion-panel-header>
             <json-editor [options]="options" [data]="item.data" on-change="onChange(item,$event)"></json-editor>
                         </mat-expansion-panel>
-                        <button matSuffix mat-icon-button (click)="delete(item,i)"><mat-icon class="icon">delete</mat-icon></button>
+                <button matSuffix mat-icon-button (click)="delete(item,i)" aria-label="Delete"><mat-icon class="icon" aria-hidden="true">delete</mat-icon></button>
        </div>
     </div>
   </div>
@@ -44,7 +44,7 @@
     <h3>Source Options</h3>
        <mat-form-field>
        <input [(ngModel)]="searchText" type="input" matInput placeholder="search sources">
-      <button matSuffix mat-icon-button (click)="getResources()"><mat-icon>search</mat-icon></button>
+      <button matSuffix mat-icon-button (click)="getResources()" aria-label="Search"><mat-icon aria-hidden="true">search</mat-icon></button>
        <mat-hint>db,mdsal,input,default,..</mat-hint>
        </mat-form-field>
        <br><br>
index 4664ad7..ab212b1 100644 (file)
@@ -25,7 +25,7 @@
   margin: 0 25px 25px 0;
   display: inline-block;
   vertical-align: top;
- border-bottom: solid 1px #ccc; 
+ border-bottom: solid 1px #999;
  border-radius: 4px;
 }
 .list-container {
   vertical-align: top;
 }
 .sources-list {
-  border: solid 1px #ccc;
+  border: solid 1px #999;
   width: 900px;
   min-height: 30px;
   background: white;
   border-radius: 4px;
   overflow: hidden;
   display: block;
-  border-bottom: solid 1px #ccc;
+  border-bottom: solid 1px #999;
 }
-.options-list {  
+.options-list {
   min-height: 30px;
   border-radius: 4px;
   overflow: hidden;
   display: block;
-  width: 100%; 
+  width: 100%;
 }
 .sources-box {
   //border-bottom: solid 1px #ccc;
   background:white;
   font-size: 14px;
   min-height: 30px;
-  
+
 }
 .options-box {
-  border: solid 1px #ccc;
+  border: solid 1px #999;
   color: white;
   display: flex;
   flex-direction: row;
  }
  .matStepNextBtn{
     color:white;
-    background:#3f51b5; 
-    margin-top: 10px; 
+    background:#3f51b5;
+    margin-top: 10px;
     position: absolute;
     border-radius: 1em;
-} 
+}
 .icon{
 color: red;
-}
\ No newline at end of file
+}
index c75748a..bf4ac43 100644 (file)
@@ -37,9 +37,9 @@ limitations under the License.
 }
 
 .btn-disablled {
-    background-color: #c5cae8;
+    background-color: #9fa8da;
     border-radius: 4px;
-    color: darkgray;
+    color: #616161;
     margin: 0.5em;
     padding: 0.5em;
     min-width: 6em;
@@ -61,7 +61,7 @@ background-color:#3f51b5;
 }
 div.jsoneditor-tree div.jsoneditor-tree-inner{
     padding-bottom: 300px;
-    background-color: white;     
+    background-color: white;
 }
 div.jsoneditor-treepath {
     padding: 0 5px;
@@ -69,4 +69,4 @@ div.jsoneditor-treepath {
     white-space: nowrap;
     outline: 0;
     color:white;
-   }
\ No newline at end of file
+   }
index ce46677..6191622 100644 (file)
@@ -7,7 +7,7 @@
                 <h2 class="col m-0">
                     <ul class="breadcrumb-header">
                         <li><a routerLink="/packages">CBA Packages</a></li>
-                        <i class="fa fa-angle-right ml-2 mr-2"></i>
+                        <i class="fa fa-angle-right ml-2 mr-2" aria-hidden="true"></i>
                         <li>Execute</li>
                     </ul>
                 </h2>
                                (click)="selectTab('setup')"
                                id="nav-setup-tab"
                                role="tab">
-                                <i class="fa fa-cog mr-1"></i> Execution Setup
+                                <i class="fa fa-cog mr-1" aria-hidden="true"></i> Execution Setup
                             </a>
                             <a class="nav-item nav-link"
                                [class.active]="activeTab === 'history'"
                                (click)="selectTab('history')"
                                id="nav-history-tab"
                                role="tab">
-                                <i class="fa fa-history mr-1"></i> Execution History
+                                <i class="fa fa-history mr-1" aria-hidden="true"></i> Execution History
                             </a>
                             <a class="nav-item nav-link"
                                [class.active]="activeTab === 'liveview'"
                                (click)="selectTab('liveview')"
                                id="nav-liveview-tab"
                                role="tab">
-                                <i class="fa fa-terminal mr-1"></i> Live View
+                                <i class="fa fa-terminal mr-1" aria-hidden="true"></i> Live View
                             </a>
                         </div>
                     </div>
index e1ec19e..330ee98 100644 (file)
@@ -2,13 +2,13 @@
     <div class="row mb-3" *ngIf="hasHistory">
         <div class="col text-right">
             <button class="btn btn-sm btn-outline-secondary" (click)="clearHistory()">
-                <i class="fa fa-trash mr-1"></i> Clear History
+                <i class="fa fa-trash mr-1" aria-hidden="true"></i> Clear History
             </button>
         </div>
     </div>
 
     <div *ngIf="!hasHistory" class="empty-state text-center p-5">
-        <i class="fa fa-history fa-3x text-muted mb-3"></i>
+        <i class="fa fa-history fa-3x text-muted mb-3" aria-hidden="true"></i>
         <p class="text-muted">No execution history yet.</p>
         <p class="text-muted small">Execute a blueprint from the Execution Setup tab to see results here.</p>
     </div>
index c0a831e..53b576c 100644 (file)
@@ -5,7 +5,7 @@
 .setup-card,
 .editor-card,
 .response-card {
-    border: 1px solid #e0e0e0;
+    border: 1px solid #bdbdbd;
     border-radius: 4px;
 }
 
@@ -21,7 +21,7 @@
 .form-group label {
     font-size: 12px;
     font-weight: 600;
-    color: #666;
+    color: #555;
     margin-bottom: 4px;
 }
 
 }
 
 .ace-editor-wrapper {
-    border: 1px solid #e0e0e0;
+    border: 1px solid #bdbdbd;
     border-radius: 3px;
 }
 
 /* Action Inputs */
 .action-inputs-section {
-    border-top: 1px solid #e0e0e0;
+    border-top: 1px solid #bdbdbd;
     padding-top: 12px;
 }
 
@@ -51,7 +51,7 @@
 .input-field-label {
     font-size: 11px;
     font-weight: 600;
-    color: #555;
+    color: #444;
     margin-bottom: 2px;
 }
 
@@ -69,7 +69,7 @@
 
 .complex-fields {
     padding-left: 10px;
-    border-left: 2px solid #e0e0e0;
+    border-left: 2px solid #bdbdbd;
 }
 
 .complex-fields .form-group {
index 0b6984a..e975d8a 100644 (file)
 
                     <!-- Action Inputs: loading state -->
                     <div *ngIf="loadingSpec" class="action-inputs-loading mt-2">
-                        <i class="fa fa-spinner fa-spin mr-1"></i>
+                        <i class="fa fa-spinner fa-spin mr-1" aria-hidden="true"></i>
                         <small class="text-muted">Loading action inputs...</small>
                     </div>
 
                     <!-- Action Inputs: spec load failed -->
                     <div *ngIf="actionName && !loadingSpec && specLoadFailed" class="action-inputs-error mt-2">
                         <small class="text-muted">
-                            <i class="fa fa-exclamation-triangle mr-1"></i>
+                            <i class="fa fa-exclamation-triangle mr-1" aria-hidden="true"></i>
                             Could not load input schema. Edit the JSON payload manually.
                         </small>
                     </div>
                         <button class="btn btn-primary btn-execute"
                                 [disabled]="!canExecute()"
                                 (click)="executeBlueprint()">
-                            <i class="fa fa-play mr-1" *ngIf="!isExecuting"></i>
-                            <i class="fa fa-spinner fa-spin mr-1" *ngIf="isExecuting"></i>
+                            <i class="fa fa-play mr-1" *ngIf="!isExecuting" aria-hidden="true"></i>
+                            <i class="fa fa-spinner fa-spin mr-1" *ngIf="isExecuting" aria-hidden="true"></i>
                             {{ isExecuting ? 'Executing...' : 'Execute' }}
                         </button>
                         <button class="btn btn-outline-secondary ml-2"
                                 (click)="resetPayload()">
-                            <i class="fa fa-refresh mr-1"></i> Reset
+                            <i class="fa fa-refresh mr-1" aria-hidden="true"></i> Reset
                         </button>
                     </div>
                 </div>
             <div class="card response-card mt-3" *ngIf="lastResponseText">
                 <div class="card-body">
                     <h5 class="card-title">
-                        <i class="fa fa-check-circle text-success mr-1" *ngIf="lastResponse"></i>
-                        <i class="fa fa-times-circle text-danger mr-1" *ngIf="!lastResponse"></i>
+                        <i class="fa fa-check-circle text-success mr-1" *ngIf="lastResponse" aria-hidden="true"></i>
+                        <i class="fa fa-times-circle text-danger mr-1" *ngIf="!lastResponse" aria-hidden="true"></i>
                         Execution Response
                     </h5>
                     <div class="ace-editor-wrapper">
index bb4182f..b9f2096 100644 (file)
@@ -1,6 +1,6 @@
 <div class="live-view-container">
     <div *ngIf="!lastResponse" class="empty-state text-center p-5">
-        <i class="fa fa-terminal fa-3x text-muted mb-3"></i>
+        <i class="fa fa-terminal fa-3x text-muted mb-3" aria-hidden="true"></i>
         <p class="text-muted">No execution response available.</p>
         <p class="text-muted small">Execute a blueprint from the Execution Setup tab to see live results here.</p>
     </div>
@@ -11,9 +11,9 @@
             'status-failure': status === 'failure',
             'status-completed': status === 'completed'
         }">
-            <i class="fa fa-check-circle mr-2" *ngIf="status === 'success'"></i>
-            <i class="fa fa-times-circle mr-2" *ngIf="status === 'failure'"></i>
-            <i class="fa fa-info-circle mr-2" *ngIf="status === 'completed'"></i>
+            <i class="fa fa-check-circle mr-2" *ngIf="status === 'success'" aria-hidden="true"></i>
+            <i class="fa fa-times-circle mr-2" *ngIf="status === 'failure'" aria-hidden="true"></i>
+            <i class="fa fa-info-circle mr-2" *ngIf="status === 'completed'" aria-hidden="true"></i>
             {{ statusLabel }}
         </div>
 
index 020da34..af11fb4 100644 (file)
@@ -7,7 +7,7 @@
                 <h2 class="col m-0">
                     <ul class="breadcrumb-header">
                         <li><a routerLink="/packages">CBA Packages</a></li>
-                        <i class="fa fa-angle-right ml-2 mr-2"></i>
+                        <i class="fa fa-angle-right ml-2 mr-2" aria-hidden="true"></i>
                         <li>{{viewedPackage.artifactName}}</li>
                     </ul>
                 </h2>
 
                             <button (click)="checkSkipTypesOfAction()" type="button" class="btn btn-sm btn-primary mb-2"
                                     data-toggle="modal" [attr.data-target]="dataTarget">
-                                <i class="icon-topologyView-active"></i> Designer Mode
+                                <i class="icon-topologyView-active" aria-hidden="true"></i> Designer Mode
                             </button>
                             <!-- Designer Modal -->
                             <div class="modal fade createActionModal" id="exampleModalLong" tabindex="-1" role="dialog"
                                             <h5 class="modal-title" id="exampleModalLongTitle"></h5>
                                             <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                                                     title="Close">
-                                                <i class="icon-action-close"></i>
+                                                <i class="icon-action-close" aria-hidden="true"></i>
                                             </button>
                                         </div>
                                         <div class="modal-body">
                             </button>
 
 
-                            <button class="btn btn-sm btn-deploy" (click)="deployCurrentPackage()"
+                            <button class="btn btn-sm btn-deploy mb2" (click)="deployCurrentPackage()"
                                     [disabled]="!isMetadataValid"
                                     [title]="isMetadataValid ? 'Deploy package' : 'Fill in all required metadata fields before deploying'"><i
-                                    class="fa fa-play-circle"></i> Deploy
+                                    class="fa fa-play-circle" aria-hidden="true"></i> Deploy
                             </button>
                             <button class="btn btn-sm btn-execute ml-1" (click)="goToExecute()"
                                     title="Execute this blueprint">
-                                <i class="fa fa-bolt"></i> Execute
+                                <i class="fa fa-bolt" aria-hidden="true"></i> Execute
                             </button>
                         </div>
                     </div>
             <div class="modal-header">
                 <h5 class="modal-title" id="removePackageModalLabel">Delete Package</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <i class="icon-action-close"></i>
+                    <i class="icon-action-close" aria-hidden="true"></i>
                 </button>
             </div>
             <div class="modal-body">
             <div class="modal-header">
                 <h5 class="modal-title" id="discardChangesModalLabel">Discard Changes</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <i class="icon-action-close"></i>
+                    <i class="icon-action-close" aria-hidden="true"></i>
                 </button>
             </div>
             <div class="modal-body">
index 9ec99dc..053ac37 100644 (file)
@@ -65,7 +65,7 @@
                                     <a class="accordion-delete deleteAttribute" tooltip="Delete Attribute"
                                         (click)="markDeletedInput(input)" data-toggle="modal"
                                         data-target="#exampleModalScrollable1" placement="bottom"><i
-                                            class="icon-delete-sm"></i></a>
+                                            class="icon-delete-sm" aria-hidden="true"></i></a>
                                 </div>
                             </div>
                         </div>
                                 <div class="attributeOptions">
                                     <a data-toggle="modal" data-target="#exampleModalScrollablte"
                                         class="accordion-delete editAttribute" tooltip="Edit Attribute"
-                                        placement="bottom" (click)="editAttribute(output)"><i class="icon-edit"></i></a>
+                                        placement="bottom" (click)="editAttribute(output)"><i class="icon-edit" aria-hidden="true"></i></a>
                                     <a class="accordion-delete deleteAttribute" tooltip="Delete Attribute"
                                         (click)="markDeletedInput(output)" data-toggle="modal"
                                         data-target="#exampleModalScrollable1" placement="bottom"><i
-                                            class="icon-delete-sm"></i></a>
+                                            class="icon-delete-sm" aria-hidden="true"></i></a>
                                 </div>
                             </div>
                         </div>
                                         'list-group-item list-group-item-action active':
                                         'list-group-item list-group-item-action'" [id]="step"
                                             *ngFor="let step of steps" data-toggle="list" href="#list-home" role="tab"
-                                            aria-controls="home"><i class="icon-resource_resolution mr-1"
+                                                aria-controls="home"><i class="icon-resource_resolution mr-1"
                                                 aria-hidden="true"></i>
                                             {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="setInputAndOutputs(
                                             this.designerState.template.workflows[actionName]['steps'][step]['target']
index f270efc..b660eb9 100644 (file)
@@ -297,7 +297,7 @@ tspan#type{
   font-size: 13px;
 }
 .input-search-controller::placeholder{
-  color: #6B7D93;
+  color: #4A5568;
   font-size: 12px;
 }
 .input-search-controller:focus{
@@ -415,13 +415,13 @@ p.compType-4{
   font-size: 12px;
   font-weight: bold;
   text-transform: uppercase;
-  color: #6B7D93;
+  color: #4A5568;
 }
 .controllerSidebar b{
   margin-left: 12px;
   margin-bottom: 9px;
   font-size: 12px;
-  color: #6B7D93;
+  color: #4A5568;
 }
 .functionsList .joint-paper{
   width: 100% !important;
@@ -501,7 +501,7 @@ p.compType-4{
   top: 1.25rem;
 }
 .actionsList .custom-control-label p{
-  color: #C7D0DD;
+  color: #6B7D93;
   font-size: 12px;
 }
 .inserActionBtns .btn{
index bcaad81..b8ebf2f 100644 (file)
@@ -9,7 +9,7 @@
                     <li class="breadcrumb-item">
                         <a href="#">CBA Packages</a>
                     </li>
-                    <i class="fa fa-angle-right ml-2 mr-2"></i>
+                    <i class="fa fa-angle-right ml-2 mr-2" aria-hidden="true"></i>
                     <li class="breadcrumb-item">
                         <a routerLink="/packages/package/{{packageId}}">{{viewedPackage.artifactName}}</a>
                         <button type="button" class="btn package-info-btn tooltip-bottom" data-toggle="modal"
@@ -17,7 +17,7 @@
                             <!--   <i class="icon-info" aria-hidden="true"></i>-->
                         </button>
                     </li>
-                    <i class="fa fa-angle-right ml-2 mr-2"></i>
+                    <i class="fa fa-angle-right ml-2 mr-2" aria-hidden="true"></i>
                     <li class="breadcrumb-item active" aria-current="page">
                         <p class="mb-0">Designer Mode</p>
                     </li>
                     <div class="btn-group" role="group" aria-label="Basic example">
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
                             data-tooltip="Preview">
-                            <i class="fa fa-eye"></i>
+                            <i class="fa fa-eye" aria-hidden="true"></i>
                         </a>
                         <a (click)="downloadPackage()" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
                             data-tooltip="Download">
-                            <i class="fa fa-download"></i>
+                            <i class="fa fa-download" aria-hidden="true"></i>
                         </a>
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
                             data-tooltip="Share">
-                            <i class="fa fa-share-square"></i>
+                            <i class="fa fa-share-square" aria-hidden="true"></i>
                         </a>
                     </div>
                 </li>
     <!--Actions/Functions Side Menu Toogole Button-->
     <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
         data-tooltip="Collapse Side bar">
-        <i class="fa arr-size">&#xf100;</i>
+        <i class="fa arr-size" aria-hidden="true">&#xf100;</i>
     </button>
     <!--Nav Tabs-->
     <div class="collapse navbar-collapse ">
         <button class="rotate" (click)="_toggleSidebar1()">
             <span>
                 Controller
-                <i class="fa fa-angle-double-left"></i>
+                <i class="fa fa-angle-double-left" aria-hidden="true"></i>
             </span>
         </button>
 
                         <div class="col-3 pl-0">
                             <div class="btn-group" role="group" aria-label="Basic example">
                                 <button type="button" class="btn view-source" tooltip="View Function Source"
-                                    placement="bottom" (click)="viewFunctionSource()"><i class="icon-source"></i></button>
+                                    placement="bottom" (click)="viewFunctionSource()"><i class="icon-source" aria-hidden="true"></i></button>
                                 <button type="button" class="btn trash-item" tooltip="Delete Function"
                                     placement="bottom"><i class="icon-delete-sm" type="button"
                                         aria-hidden="true"></i></button>
index 52b66a3..fdb49bb 100644 (file)
 
                                     <!--integer-->
                                     <!-- <div class="attribute-wrap">
-                                        
+
                                     </div> -->
 
                                 </div>
 
                                 <a data-toggle="modal" (click)="fileToDelete = file"
                                     data-target="#templateDeletionModal" class="accordion-delete deleteTemplate"
-                                    title="Delete Template"><i class="icon-delete-sm"></i></a>
+                                    title="Delete Template"><i class="icon-delete-sm" aria-hidden="true"></i></a>
                             </a>
 
                         </div>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
index bd721d0..8634732 100644 (file)
@@ -7,7 +7,7 @@
                     <li class="breadcrumb-item">
                         <a href="#">CBA Packages</a>
                     </li>
-                    <i class="fa fa-angle-right ml-2 mr-2"></i>
+                    <i class="fa fa-angle-right ml-2 mr-2" aria-hidden="true"></i>
                     <li class="breadcrumb-item">
                         <a href="/package/{{this.packageId}}">{{viewedPackage.artifactName}}</a>
                         <button type="button" class="btn package-info-btn" data-toggle="modal"
@@ -15,7 +15,7 @@
                             <i class="icon-info" aria-hidden="true"></i>
                         </button>
                     </li>
-                    <i class="fa fa-angle-right ml-2 mr-2"></i>
+                    <i class="fa fa-angle-right ml-2 mr-2" aria-hidden="true"></i>
                     <li class="breadcrumb-item active" aria-current="page">
                         <p class="mb-0">Topology View</p>
                     </li>
                     <div class="btn-group" role="group" aria-label="Basic example">
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
                             data-tooltip="Preview">
-                            <i class="fa fa-eye"></i>
+                            <i class="fa fa-eye" aria-hidden="true"></i>
                         </a>
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
                             data-tooltip="Download">
-                            <i class="fa fa-download"></i>
+                            <i class="fa fa-download" aria-hidden="true"></i>
                         </a>
                         <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom"
                             data-tooltip="Share">
-                            <i class="fa fa-share-square"></i>
+                            <i class="fa fa-share-square" aria-hidden="true"></i>
                         </a>
                     </div>
                 </li>
 <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
     <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
         data-tooltip="Collapse Side bar">
-        <i class="fa arr-size">&#xf100;</i>
+        <i class="fa arr-size" aria-hidden="true">&#xf100;</i>
     </button>
     <div class="collapse navbar-collapse ">
         <ul class="navbar" style="list-style: none">
index 8b93920..2cb9ea2 100644 (file)
                     <h5 class="mb-0 d-flex justify-content-between">
                         <button class="btn btn-link " data-toggle="collapse" aria-expanded="false"
                             (click)="changeDivShow(mapIndex)">
-                            <i class="icon-file-code"></i> {{file.key}} <span class="readonlyTxt">(ReadOnly)</span>
+                            <i class="icon-file-code" aria-hidden="true"></i> {{file.key}} <span class="readonlyTxt">(ReadOnly)</span>
                         </button>
 
                         <a data-toggle="modal" (click)="initDelete(file)" data-target="#exampleModal1"
-                            class="accordion-delete"><i class="icon-delete-sm"></i></a>
+                            class="accordion-delete"><i class="icon-delete-sm" aria-hidden="true"></i></a>
 
                         <!-- <a class="accordion-delete" (click)="removeFile(mapIndex)"><i class="icon-delete-sm"></i></a> -->
                         <!-- Delete Modal -->
index d188dbf..af18ae7 100644 (file)
@@ -7,7 +7,7 @@
         <h2 class="col m-0 pb-0">
           <ul class="breadcrumb-header">
             <li><a routerLink="/packages">CBA Packages</a></li>
-            <i class="fa fa-angle-right ml-2 mr-2"></i>
+            <i class="fa fa-angle-right ml-2 mr-2" aria-hidden="true"></i>
             <li>Package Name</li>
           </ul>
         </h2>
@@ -78,7 +78,7 @@
     </header>
 
     <div class="container-fluid body-container">
-      <ngx-ui-loader></ngx-ui-loader> 
+      <ngx-ui-loader></ngx-ui-loader>
       <div class="container">
         <div class="creat-action-container">
           <!--  <a class="action-button save" [hidden]="!isSaveEnabled" (click)="saveBluePrint()">
index 6782998..49cffcf 100644 (file)
@@ -1,7 +1,7 @@
 <div class="import-container-all">
     <div class="mb-4">
         <!--Create Script File-->
-    <button type="button" data-target="#createScriptsModal" data-toggle="modal" class="btn mb-2 mr-2 create-script-button"><i class="fa fa-plus"></i> <span></span>Create Script
+    <button type="button" data-target="#createScriptsModal" data-toggle="modal" class="btn mb-2 mr-2 create-script-button"><i class="fa fa-plus" aria-hidden="true"></i> <span></span>Create Script
     </button>
         <span tourAnchor="st-scriptsImport" class="import-container-span">Or you can also <a data-target="#scriptsModal"
                 data-toggle="modal" (click)="resetTheUploadedFiles()" href="#"><b>Import File</b></a></span>
                     <h5 class="mb-0 d-flex justify-content-between">
                         <button (click)="changeDivShow(mapIndex)" aria-expanded="false" class="btn btn-link collapsed"
                             data-toggle="collapse">
-                            <i class="icon-file-code"></i> {{file.key}}
+                            <i class="icon-file-code" aria-hidden="true"></i> {{file.key}}
                         </button>
                         <a data-toggle="modal" (click)="initDelete(file)" data-target="#exampleModal"
-                            class="accordion-delete"><i class="icon-delete-sm"></i></a>
+                            class="accordion-delete"><i class="icon-delete-sm" aria-hidden="true"></i></a>
                         <!-- <a (click)="removeFile(file.key,mapIndex)" data-toggle="modal" data-target="#exampleModal" class="accordion-delete"><i
                                     class="icon-delete-sm"></i></a> -->
                         <!-- Delete Modal -->
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
index 8431e77..f1672ae 100644 (file)
                         <button [disabled]="!(templateFileContent?.trim()?.length > 0)"
                             (click)="getMappingTableFromTemplate($event)" class="mapping-source-load" [ngClass]="templateFileContent?.trim()?.length > 0
                             ?'hover-enable':'hover-disable'">
-                            <i class="icon-use-attributes"></i>
+                            <i class="icon-use-attributes" aria-hidden="true"></i>
                             <br />
                             <span>Use Current Template Instance</span>
                         </button>
                         <a href="#" (click)="allowedExt=['.csv','.xml']" data-toggle="modal"
                             data-target="#templateModal" class="mapping-source-load">
-                            <i class="icon-upload-attributes"></i>
+                            <i class="icon-upload-attributes" aria-hidden="true"></i>
                             <br />
                             <div>Upload Attributes List</div>
                             <div class="source-load-note">CSV or XML files</div>
                                 <label class="custom-control-label" for="customCheck1"></label>
                             </div>
                             <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="reMap()"
-                                tooltip="Re-mapping" placement="bottom"><i class="icon-autoMap"></i></button>
+                                tooltip="Re-mapping" placement="bottom"><i class="icon-autoMap" aria-hidden="true"></i></button>
                             <button [disabled]="selectedProps.size <=0" type="button" class="btn"
                                 (click)="removeProps()" tooltip="Remove" placement="bottom"><i
-                                    class="icon-delete-sm"></i></button>
+                                    class="icon-delete-sm" aria-hidden="true"></i></button>
                             <div class="mappingSelectedAtt">
                                 <span>{{selectedProps.size}} selected </span>
                                 <span>({{mappingRes.length}} attributes in total)</span>
                         </mat-form-field>
                         <mat-paginator [pageSizeOptions]="[10, 25,50, 100,this.mappingRes.length]">
                         </mat-paginator>
-                        
+
                         <table mat-table matSortDisableClear [dataSource]="initDataSource" matSort>
                             <!-- select Column -->
                             <ng-container matColumnDef="select">
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
index 3a023b7..dc9f664 100644 (file)
@@ -1,5 +1,5 @@
 <a (click)="createNewTemplate()" class="create-template-mapping-button">
-    <i class="fa fa-plus"></i> <span>Create Template</span>
+    <i class="fa fa-plus" aria-hidden="true"></i> <span>Create Template</span>
 </a>
 
 
@@ -62,4 +62,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
index 3fc6e93..4769726 100644 (file)
@@ -26,7 +26,7 @@
                 <h2 class="col m-0 pb-0">
                     <ul class="breadcrumb-header">
                         <li><a routerLink="/resource-dictionary">Resource Dictionary</a></li>
-                        <i class="fa fa-angle-right ml-2 mr-2"></i>
+                        <i class="fa fa-angle-right ml-2 mr-2" aria-hidden="true"></i>
                         <li>Dictionary Name</li>
                     </ul>
                 </h2>
index 91b6b1d..d4c6a5e 100644 (file)
@@ -9,19 +9,19 @@
           <a routerLink="/packages">Packages</a>
           <span class="icon">
             <!-- <i class="fa fa-dashboard"></i> -->
-            <i class="icon-nav-packages"></i>
+            <i class="icon-nav-packages" aria-hidden="true"></i>
           </span>
         </li>
         <li>
           <a routerLink="/resource-dictionary">Resource Dictionary</a>
           <span class="icon">
-            <i class="icon-nav-dictionary"></i>
+            <i class="icon-nav-dictionary" aria-hidden="true"></i>
           </span>
         </li>
         <li>
           <a routerLink="/execute">Execute</a>
           <span class="icon">
-            <i class="fa fa-play-circle"></i>
+            <i class="fa fa-play-circle" aria-hidden="true"></i>
           </span>
         </li>
           <!-- <label title="toggle menu" for="settings">
index 3cc8e01..fd7a8d1 100644 (file)
@@ -843,8 +843,8 @@ height: 40px;
   position: relative;
   text-indent: 10px;
   line-height: 32px;
-  background-color: #eee;
-  border: 1px solid #ccc;
+  background-color: #e0e0e0;
+  border: 1px solid #999;
   border-radius: 3px;
   box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
   width: 100%;
@@ -895,18 +895,18 @@ height: 40px;
   border-radius: 3px;
   text-indent: 10px;
   line-height: 28px;
-  background-color: #eee;
-  border: 1px solid #ccc;
+  background-color: #e0e0e0;
+  border: 1px solid #999;
 }
 .dropdown-content a{
   display: block;
 }
 .dropdown-content a:hover{
-  background: #e8e8e8;
+  background: #d5d5d5;
 }
 .dropdown-toggle:hover ~ .dropdown-text,
 .dropdown-toggle:focus ~ .dropdown-text{
-  background-color: #e8e8e8;
+  background-color: #d5d5d5;
 }
 .dropdown-toggle:focus ~ .dropdown-text{
   box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8);
@@ -2270,6 +2270,16 @@ padding-left: 20px !important;
   cursor: not-allowed;
   opacity: 0.65;
 }
+.package-view-button .btn-execute{
+  background-color: #1B7D3C !important;
+  border-color: #1B7D3C !important;
+  color: #fff !important;
+  font-weight: 600;
+}
+.package-view-button .btn-execute:hover{
+  background-color: #156A32 !important;
+  border-color: #156A32 !important;
+}
 .package-view-title {
   font-size: 11px;
   color: #1B3E6F;
@@ -3042,7 +3052,7 @@ animation: glowing 1500ms infinite;
 }
 .ace_print-margin{
   left: 100% !important;
-  background: #eee !important;
+  background: #d5d5d5 !important;
 }
 .ace_content{
   width: 100% !important;