Data table delete button accessibility (#6431)

## Motivation for features / changes
Not recommended to put a click event on an icon because it has
accessibility problems, so this change aims to address that.

## Technical description of changes
Wrap the delete icon in a <button> and have the on click component from
the button and not the icon.

## Screenshots of UI changes (or N/A)
N/A

## Detailed steps to verify changes work correctly (as executed by you)

## Alternate designs / implementations considered (or N/A)

Author: bhuang1323

tensorboard/webapp/widgets/data_table/header_cell_component.ng.html

@@ -23,12 +23,15 @@
 >
   <ng-content></ng-content>
   <div *ngIf="hparamsEnabled" class="delete-icon-container">
-    <mat-icon
+    <button
       class="delete-icon"
-      svgIcon="close_24px"
+      mat-icon-button
+      i18n-aria-label="A button to delete a data table column."
+      aria-label="Delete column"
       (click)="deleteButtonClicked.emit(header)"
     >
-    </mat-icon>
+      <mat-icon svgIcon="close_24px"> </mat-icon>
+    </button>
   </div>
   <tb-data-table-header [header]="header"></tb-data-table-header>
   <div *ngIf="sortable" class="sorting-icon-container">

tensorboard/webapp/widgets/data_table/header_cell_component.scss

@@ -46,21 +46,36 @@ $_accent: map-get(mat.get-color-config($tb-theme), accent);
   opacity: 1;
 }
 
-.delete-icon-container {
-  border-radius: 5px;
+.delete-icon {
+  background-color: #fff;
+  border: 0;
+  border-radius: 50%;
   color: mat.get-color-from-palette(mat.$gray-palette, 500);
-  height: 12px;
-  margin-left: -12px;
-  opacity: 0;
-  position: absolute;
-  width: 12px;
+  font-size: 11px;
+  height: 11px;
+  margin-top: 2px;
+  padding: 0;
+  width: 11px;
+
+  .mat-icon {
+    width: 100%;
+    height: 100%;
+  }
 }
 
-.delete-icon-container:hover {
+.delete-icon:hover {
+  background-color: mat.get-color-from-palette(mat.$gray-palette, 400);
   color: #fff;
+  cursor: pointer;
+}
+
+.delete-icon-container {
+  margin-left: -12px;
+  opacity: 0;
+  position: absolute;
 }
 
-.delete-icon-container:hover {
+.delete-icon:hover {
   background-color: mat.get-color-from-palette(mat.$gray-palette, 400);
   cursor: pointer;
 }