diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.ng.html b/tensorboard/webapp/widgets/data_table/header_cell_component.ng.html
index 374326d677..4aebef1261 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.ng.html
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component.ng.html
@@ -23,7 +23,12 @@
 >
   <ng-content></ng-content>
   <tb-data-table-header [header]="header"></tb-data-table-header>
-  <div *ngIf="header.sortable" class="sorting-icon-container">
+  <button
+    mat-icon-button
+    *ngIf="header.sortable"
+    class="sorting-icon-container"
+    (click)="$event.stopPropagation(); headerClickedHandler()"
+  >
     <mat-icon
       *ngIf="
             sortingInfo.order === SortingOrder.ASCENDING ||
@@ -44,14 +49,13 @@
           "
       svgIcon="arrow_downward_24px"
     ></mat-icon>
-  </div>
-  <div
+  </button>
+  <button
+    mat-icon-button
     *ngIf="(header.removable || header.sortable) && !disableContextMenu"
     class="context-menu-container show-on-hover"
+    (click)="onContextMenuOpened($event)"
   >
-    <mat-icon
-      (click)="onContextMenuOpened($event)"
-      svgIcon="more_vert_24px"
-    ></mat-icon>
-  </div>
+    <mat-icon svgIcon="more_vert_24px"></mat-icon>
+  </button>
 </div>
diff --git a/tensorboard/webapp/widgets/data_table/header_cell_component.scss b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
index 5c8b9b0209..704f98ccda 100644
--- a/tensorboard/webapp/widgets/data_table/header_cell_component.scss
+++ b/tensorboard/webapp/widgets/data_table/header_cell_component.scss
@@ -34,14 +34,20 @@ $_icon_size: 12px;
     &:hover {
       opacity: 1;
     }
+    &:focus {
+      opacity: 1;
+    }
   }
 }
 
 .sorting-icon-container,
 .context-menu-container {
-  width: $_icon_size;
-  height: $_icon_size;
+  width: $_icon_size + 4px;
+  height: $_icon_size + 4px;
   border-radius: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .cell {
@@ -51,6 +57,7 @@ $_icon_size: 12px;
   mat-icon {
     height: $_icon_size;
     width: $_icon_size;
+    line-height: 1;
   }
 
   .sorting-icon-container {