[RPP] Fix a11y 3P table navigation and keyboard navigation

- Adds table label for focus (b/392169056)
- Adds aria-sort label on column headers (b/392649075)
- Includes hover button on select for keyboard navigation (b/392646319)

Bug:392649075,392169056,392646319
Change-Id: I5fad0ae43df87e0ea562f2fde35890d810db1872
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6209999
Commit-Queue: Paul Irish <[email protected]>
Commit-Queue: Adriana Ixba <[email protected]>
Reviewed-by: Paul Irish <[email protected]>

Author: Adriana Ixba

front_end/panels/timeline/TimelineUIUtils.ts

@@ -510,6 +510,10 @@ const UIStrings = {
    * @description Text to refer to a 3rd Party entity.
    */
   entity: '3rd party entity',
+  /**
+   * @description Label for third party table.
+   */
+  thirdPartyTable: '1st / 3rd party table',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineUIUtils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -2231,6 +2235,7 @@ export class TimelineUIUtils {
 
     const thirdPartyDiv = document.createElement('div');
     thirdPartyDiv.className = 'third-party-table';
+    UI.ARIAUtils.setLabel(thirdPartyDiv, i18nString(UIStrings.thirdPartyTable));
 
     treeSlot.name = 'third-party-table';
     treeSlot.append(treeView);

front_end/panels/timeline/components/timelineSummary.css

@@ -89,7 +89,8 @@
     font-weight: var(--ref-typeface-weight-medium);
   }
 
-  tr.revealed:hover {
+  tr.revealed:hover,
+  tr.selected {
     .button-container {
       align-items: center;
       display: block;

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

@@ -1274,6 +1274,12 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.sortByColumnHeaderCell((cell as HTMLElement));
   }
 
+  /**
+   * Sorts by column header cell.
+   * Additionally applies the aria-sort label to a column's th.
+   * Guidance on values of attribute taken from
+   * https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html.
+   */
   private sortByColumnHeaderCell(cell: Element): void {
     if (!nodeToColumnIdMap.has(cell) || !cell.classList.contains('sortable')) {
       return;
@@ -1286,10 +1292,13 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     if (this.sortColumnCell) {
       this.sortColumnCell.classList.remove(Order.Ascending, Order.Descending);
+      this.sortColumnCell.removeAttribute('aria-sort');
     }
     this.sortColumnCell = cell;
 
     cell.classList.add(sortOrder);
+    const ariaLabel = this.isSortOrderAscending() ? 'ascending' : 'descending';
+    cell.setAttribute('aria-sort', ariaLabel);
 
     this.dispatchEventToListeners(Events.SORTING_CHANGED);
   }