Accessibility updates for 'delete function' button in FunctionManageC…

…omponent
Azure · Dec 16, 2017 · d4f7736 · d4f7736
1 parent 9b2a899
commit d4f7736
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/AzureFunctions.AngularClient/src/app/function-manage/function-manage.component.css b/AzureFunctions.AngularClient/src/app/function-manage/function-manage.component.css
@@ -20,12 +20,15 @@ pre {
 }
 
 .delete-app {
-    padding-left: 50px;
+    margin-left: 50px;
+    padding: 0 2px 0 0;
     display: flex;
+    border: none;
+    background: transparent;
 }
 
 .icon-small{
-    margin-right: 5px;
+    margin-right: 2px;
 }
 
 #submit-delete {

diff --git a/AzureFunctions.AngularClient/src/app/function-manage/function-manage.component.html b/AzureFunctions.AngularClient/src/app/function-manage/function-manage.component.html
@@ -6,10 +6,10 @@
                 <radio-selector *ngIf="!runtimeVersion" [disabled]="true" [options]="functionStatusOptions" [defaultValue]="!!functionInfo.config.disabled"></radio-selector>
                 <radio-selector *ngIf="runtimeVersion === 'V1'" [fnWriteAccess]="functionApp" [options]="functionStatusOptions" [defaultValue]="!!functionInfo.config.disabled" (value)="functionStateValueChange.next($event)"></radio-selector>
                 <radio-selector *ngIf="runtimeVersion === 'V2'" [options]="functionStatusOptions" [defaultValue]="!!functionInfo.config.disabled" (value)="functionStateValueChange.next($event)"></radio-selector>
-                <span class="clickable delete-app" (click)="deleteFunction()" [fnWriteAccess]="functionApp">
-                    <span load-image="image/delete.svg" class="icon-small"></span>
+                <button class="delete-app" (click)="deleteFunction()" [fnWriteAccess]="functionApp">
+                    <span load-image="image/delete.svg" class="icon-small" role="presentation"></span>
                     {{ 'functionManage_deleteFunction' | translate }}
-                </span>
+                </button>
             </div>
         </div>
     </div>