Update DataTableBindingManager.ts

less/TableStyles/queryBuilder.less

@@ -230,7 +230,7 @@ input::-webkit-inner-spin-button {
 .advanced-options-panel .advanced-options .select .select-options-link {
   margin-left: 4px;
   cursor: pointer;
-  padding: 2px;
+  outline: none;
 }
 
 .query-panel .row .column-headers .Field {

src/Common/TableEntity.tsx

@@ -137,7 +137,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
         />
         {!isEntityValueDisable && (
           <TooltipHost content="Edit property" id="editTooltip">
-            <div>
+            <div tabIndex={0}>
               <Image
                 {...imageProps}
                 src={EditIcon}

src/Explorer/Controls/ThroughputInput/ThroughputInput.less

@@ -14,7 +14,3 @@
 .throughputInputSpacing > :not(:last-child) {
   margin-bottom: @DefaultSpace;
 }
-.capacitycalculator-link:focus{
-  text-decoration: underline;
-  outline-offset: 2px;
-}

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -33,7 +33,6 @@ import { isCapabilityEnabled, isServerlessAccount } from "Utils/CapabilityUtils"
 import { getUpsellMessage } from "Utils/PricingUtils";
 import { CollapsibleSectionComponent } from "../Controls/CollapsiblePanel/CollapsibleSectionComponent";
 import { ThroughputInput } from "../Controls/ThroughputInput/ThroughputInput";
-import "../Controls/ThroughputInput/ThroughputInput.less";
 import { ContainerSampleGenerator } from "../DataSamples/ContainerSampleGenerator";
 import Explorer from "../Explorer";
 import { useDatabases } from "../useDatabases";
@@ -844,11 +843,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   <Text variant="small">
                     Azure Synapse Link is required for creating an analytical store{" "}
                     {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account.{" "}
-                    <Link
-                      href="https://aka.ms/cosmosdb-synapselink"
-                      target="_blank"
-                      className="capacitycalculator-link"
-                    >
+                    <Link href="https://aka.ms/cosmosdb-synapselink" target="_blank">
                       Learn more
                     </Link>
                   </Text>

src/Explorer/Panes/PanelComponent.less

@@ -112,9 +112,6 @@
   margin-top: 28px;
   margin-left: 4px !important;
 }
-.addRemoveIcon [alt="editEntity"]:focus,.addRemoveIconLabel [alt="editEntity"]:focus{
-  border:1px dashed #605E5C
-}
 .addNewParamStyle {
   margin-top: 5px;
   margin-left: 5px !important;

src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap

@@ -400,7 +400,6 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           . Enable Synapse Link for this Cosmos DB account.
            
           <StyledLinkBase
-            className="capacitycalculator-link"
             href="https://aka.ms/cosmosdb-synapselink"
             target="_blank"
           >

src/Explorer/Tables/DataTable/DataTableBindingManager.ts

@@ -1,14 +1,15 @@
 import * as ko from "knockout";
 import * as _ from "underscore";
 
-import QueryTablesTab from "../../Tabs/QueryTablesTab";
 import * as Constants from "../Constants";
-import * as Entities from "../Entities";
-import * as Utilities from "../Utilities";
+import * as ViewModels from "../../../Contracts/ViewModels";
 import * as DataTableBuilder from "./DataTableBuilder";
 import DataTableOperationManager from "./DataTableOperationManager";
 import * as DataTableOperations from "./DataTableOperations";
+import QueryTablesTab from "../../Tabs/QueryTablesTab";
 import TableEntityListViewModel from "./TableEntityListViewModel";
+import * as Utilities from "../Utilities";
+import * as Entities from "../Entities";
 
 /**
  * Custom binding manager of datatable
@@ -41,10 +42,6 @@ function bindDataTable(element: any, valueAccessor: any, allBindings: any, viewM
   createDataTable(0, tableEntityListViewModel, queryTablesTab); // Fake a DataTable to start.
   $(window).resize(updateTableScrollableRegionMetrics);
   operationManager.focusTable(); // Also selects the first row if needed.
-  // Attach the arrow key event handler to the table element
-  $dataTable.on("keydown", (event: JQueryEventObject) => {
-    handlearrowkey(element, valueAccessor, allBindings, viewModel, bindingContext, event);
-  });
 }
 
 function onTableColumnChange(enablePrompt: boolean = true, queryTablesTab: QueryTablesTab) {
@@ -213,39 +210,6 @@ function selectionChanged(element: any, valueAccessor: any, allBindings: any, vi
     });
   //selected = bindingContext.$data.selected();
 }
-function handlearrowkey(
-  element: any,
-  valueAccessor: any,
-  allBindings: any,
-  viewModel: any,
-  bindingContext: any,
-  event: JQueryEventObject
-) {
-  let isUpArrowKey: boolean = event.keyCode === Constants.keyCodes.UpArrow;
-  let isDownArrowKey: boolean = event.keyCode === Constants.keyCodes.DownArrow;
-
-  if (isUpArrowKey || isDownArrowKey) {
-    let $dataTable = $(element);
-    let $selectedRow = $dataTable.find("tr.selected");
-
-    if ($selectedRow.length === 0) {
-      // No row is currently selected, select the first row
-      $selectedRow = $dataTable.find("tr:first");
-      $selectedRow.addClass("selected");
-    } else {
-      let $targetRow = isUpArrowKey ? $selectedRow.prev("tr") : $selectedRow.next("tr");
-
-      if ($targetRow.length > 0) {
-        // Remove the selected class from the current row and add it to the target row
-        $selectedRow.removeClass("selected").attr("tabindex", "-1");
-        $targetRow.addClass("selected").attr("tabindex", "0");
-        $targetRow.focus();
-      }
-    }
-
-    event.preventDefault();
-  }
-}
 
 function dataChanged(element: any, valueAccessor: any, allBindings: any, viewModel: any, bindingContext: any) {
   // do nothing for now