DevTools: Fix accessibility issue where datagrid tables in console caused inconsistent keyboard navigation

Issue: Keyboard accessibility in console is inconsistent when datagrids are present.
Shift + Tab in console prompt takes you to the last console message, beyond which arrow keys let you navigate through console messages.

When console.table creates datagrids, the original tabIndex for these is 0, which immediately take focus on shift+tab. This has now been updated to -1, since keyboard focus is not needed in console datagrids. Sorting functionality is still keyboard accessible using context menu key.

Gif: https://imgur.com/a/jlGCoFg

Bug: 963183
Change-Id: I5996505724f66530b8e4f73379e7d196eb3d013f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1873358
Reviewed-by: Lorne Mitchell <[email protected]>
Commit-Queue: Anubha Mathur <[email protected]>
diff --git a/front_end/console/ConsoleViewMessage.js b/front_end/console/ConsoleViewMessage.js
index 3ed93b5..b2ad49b 100644
--- a/front_end/console/ConsoleViewMessage.js
+++ b/front_end/console/ConsoleViewMessage.js
@@ -198,6 +198,7 @@
     if (flatValues.length) {
       this._dataGrid = DataGrid.SortableDataGrid.create(columnDisplayNames, flatValues);
       this._dataGrid.setStriped(true);
+      this._dataGrid.setFocusable(false);
 
       const formattedResult = createElementWithClass('span', 'console-message-text');
       const tableElement = formattedResult.createChild('div', 'console-message-formatted-table');