Fix data grid selection with keyboard navigation

1) Ensure only one row is highlighted when using keyboard navigation
Currently keyboard navigation doesn't change activeElement, but sets 'selected' CSS class, which can results in one row highlighted due to the `:focus-within` rule and the other due to the `.selected` rule
2) Do not reset focus on keydown if the data grid is in the shadow root
Currently we check if `document.activeElement` is in the data grid's subtree, but `document.activeElement` might be the shadow host of the data grid.

Bug: 394287937
Change-Id: If779219871d1e076e0b3cbf937cf2dae577058f2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6226108
Reviewed-by: Kim-Anh Tran <[email protected]>
Auto-Submit: Danil Somsikov <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: danilsomsikov

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

@@ -1231,7 +1231,8 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       nextSelectedNode.select();
     }
 
-    if (handled && this.element !== document.activeElement && !this.element.contains(document.activeElement)) {
+    const activeElement = (Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument) as HTMLElement | null);
+    if (handled && this.element !== activeElement && !this.element.contains(activeElement)) {
       // crbug.com/1005449, crbug.com/1329956
       // navigational or delete keys pressed but current DataGrid panel has lost focus;
       // re-focus to ensure subsequent keydowns can be registered within this DataGrid

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

@@ -236,7 +236,7 @@
   }
 }
 
-.data-grid tbody tr.revealed:focus-within {
+.data-grid:focus-within tbody tr.revealed.selected {
   background-color: var(--sys-color-tonal-container);
 }