Update tsconfig.strict.json

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/EntityValue.tsx

@@ -1,5 +1,6 @@
 import { DatePicker, TextField } from "@fluentui/react";
 import React, { FunctionComponent } from "react";
+import { attributeValueLabel } from "../Explorer/Panes/Tables/Validators/EntityTableHelper";
 
 export interface TableEntityProps {
   entityValueLabel?: string;
@@ -55,11 +56,13 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
       label={entityValueLabel && entityValueLabel}
       className="addEntityTextField"
       id="entityValueId"
+      autoFocus
       disabled={isEntityValueDisable}
       type={entityValueType}
       placeholder={entityValuePlaceholder}
       value={typeof entityValue === "string" ? entityValue : ""}
       onChange={onEntityValueChange}
+      ariaLabel={attributeValueLabel}
     />
   );
 };

src/Common/TableEntity.tsx

@@ -12,6 +12,7 @@ import {
 import React, { FunctionComponent } from "react";
 import DeleteIcon from "../../images/delete.svg";
 import EditIcon from "../../images/Edit_entity.svg";
+import { attributeNameLabel, dataTypeLabel } from "../Explorer/Panes/Tables/Validators/EntityTableHelper";
 import { CassandraType, TableType } from "../Explorer/Tables/Constants";
 import { userContext } from "../UserContext";
 import { EntityValue } from "./EntityValue";
@@ -36,7 +37,7 @@ export interface TableEntityProps {
   onDeleteEntity?: () => void;
   onEditEntity?: () => void;
   onEntityPropertyChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
-  onEntityTypeChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void;
+  onEntityTypeChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void
   onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
   onSelectDate: (date: Date | null | undefined) => void;
   onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
@@ -113,6 +114,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           value={entityProperty}
           onChange={onEntityPropertyChange}
           required
+          ariaLabel={attributeNameLabel}
         />
         <Dropdown
           label={entityTypeLabel && entityTypeLabel}
@@ -122,6 +124,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           disabled={isPropertyTypeDisable}
           id="entityTypeId"
           styles={dropdownStyles}
+          ariaLabel={dataTypeLabel}
         />
         <EntityValue
           entityValueLabel={entityValueLabel}
@@ -137,7 +140,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
         />
         {!isEntityValueDisable && (
           <TooltipHost content="Edit property" id="editTooltip">
-            <div>
+            <div tabIndex={0}>
               <Image
                 {...imageProps}
                 src={EditIcon}

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -24,8 +24,6 @@ import { calculateEstimateNumber, usageInGB } from "../../../../../Utils/Pricing
 import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
 import {
   AutoscaleEstimatedSpendingDisplayProps,
-  ManualEstimatedSpendingDisplayProps,
-  PriceBreakdown,
   checkBoxAndInputStackProps,
   getAutoPilotV3SpendElement,
   getChoiceGroupStyles,
@@ -33,14 +31,16 @@ import {
   getRuPriceBreakdown,
   getTextFieldStyles,
   getToolTipContainer,
+  ManualEstimatedSpendingDisplayProps,
   manualToAutoscaleDisclaimerElement,
   messageBarStyles,
   noLeftPaddingCheckBoxStyle,
+  PriceBreakdown,
   saveThroughputWarningMessage,
   titleAndInputStackProps,
   transparentDetailsHeaderStyle,
 } from "../../SettingsRenderUtils";
-import { IsComponentDirtyResult, getSanitizedInputValue, isDirty } from "../../SettingsUtils";
+import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
 import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
 
 export interface ThroughputInputAutoPilotV3Props {
@@ -218,7 +218,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     const estimatedSpendingColumns: IColumn[] = [
       {
         key: "costType",
-        name: "Cost Type",
+        name: "",
         fieldName: "costType",
         minWidth: 100,
         maxWidth: 200,
@@ -312,7 +312,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     const estimatedSpendingColumns: IColumn[] = [
       {
         key: "costType",
-        name: "Cost type",
+        name: "",
         fieldName: "costType",
         minWidth: 100,
         maxWidth: 200,

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap

@@ -311,7 +311,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
               "key": "costType",
               "maxWidth": 200,
               "minWidth": 100,
-              "name": "Cost type",
+              "name": "",
               "styles": Object {
                 "root": Object {
                   "selectors": Object {
@@ -586,7 +586,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
               "key": "costType",
               "maxWidth": 200,
               "minWidth": 100,
-              "name": "Cost type",
+              "name": "",
               "styles": Object {
                 "root": Object {
                   "selectors": Object {

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
+                    <Link href="https://aka.ms/cosmosdb-synapselink" target="_blank">
-                      href="https://aka.ms/cosmosdb-synapselink"
-                      target="_blank"
-                      className="capacitycalculator-link"
-                    >
                       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 ViewModels from "../../../Contracts/ViewModels";
-import * as Utilities from "../Utilities";
 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

tsconfig.strict.json

@@ -135,7 +135,6 @@
     "./src/quickstart.ts",
     "./src/setupTests.ts",
     "./src/userContext.test.ts",
-    "src/Common/EntityValue.tsx",
     "./src/Platform/Hosted/Components/SwitchAccount.tsx",
     "./src/Platform/Hosted/Components/SwitchSubscription.tsx"
   ],