[RPP] Make 3P table column headers accessible by keyboard

Bug:392645972
Change-Id: I4214cc3325c296cfe38d1509b6cc8bbbb7e8f04e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6210000
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>

Author: Adriana Ixba

front_end/panels/timeline/components/timelineSummary.css

@@ -96,6 +96,13 @@
       display: block;
     }
   }
+
+  /* Default data-grid has this element on the edge of the rows,
+    we don't need them for the 3P table. So for now set display to none.
+   */
+  .corner {
+    display: none;
+  }
 }
 
 .widget.vbox.timeline-tree-view {

front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -421,6 +421,8 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
                 .track({click: column.sortable, resize: true})
                 .context(Platform.StringUtilities.toKebabCase(columnId))}`);
     cell.className = columnId + '-column';
+    cell.setAttribute('tabindex', '0');
+    cell.setAttribute('role', 'columnheader');
     nodeToColumnIdMap.set(cell, columnId);
     this.dataTableHeaders[columnId] = cell;
 
@@ -439,6 +441,11 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     if (column.sortable) {
       cell.addEventListener('click', this.clickInHeaderCell.bind(this), false);
+      /**
+       * For a11y reasons to allow for keyboard navigation through the table headers
+       * we additionally have a keydown event listener.
+       */
+      cell.addEventListener('keydown', this.keydownHeaderCell.bind(this), false);
       cell.classList.add('sortable');
       const icon = document.createElement('span');
       icon.className = 'sort-order-icon';
@@ -1274,6 +1281,12 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.sortByColumnHeaderCell((cell as HTMLElement));
   }
 
+  private keydownHeaderCell(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      this.clickInHeaderCell(event);
+    }
+  }
+
   /**
    * Sorts by column header cell.
    * Additionally applies the aria-sort label to a column's th.

front_end/ui/legacy/components/data_grid/dataGrid.css

@@ -189,7 +189,8 @@
   padding-right: 14px;
 }
 
-.data-grid th.sortable:hover {
+.data-grid th.sortable:hover,
+.data-grid th.sortable:focus-within {
   background-color: var(--sys-color-state-hover-on-subtle);
 }