Update ThroughputInput.less

less/TableStyles/fulldatatables.less

@@ -650,4 +650,4 @@ tr:hover td.nameColumnText {
 
 .context-menu-item.icon-customize-columns {
     background-image: url(../../images/Options.svg);
-}
+}

src/Common/EntityValue.tsx

@@ -1,6 +1,5 @@
 import { DatePicker, TextField } from "@fluentui/react";
 import React, { FunctionComponent } from "react";
-import { attributeValueLabel } from "../Explorer/Panes/Tables/Validators/EntityTableHelper";
 
 export interface TableEntityProps {
   entityValueLabel?: string;
@@ -56,13 +55,11 @@ 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,7 +12,6 @@ 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";
@@ -37,7 +36,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;
@@ -114,7 +113,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           value={entityProperty}
           onChange={onEntityPropertyChange}
           required
-          ariaLabel={attributeNameLabel}
         />
         <Dropdown
           label={entityTypeLabel && entityTypeLabel}
@@ -124,7 +122,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           disabled={isPropertyTypeDisable}
           id="entityTypeId"
           styles={dropdownStyles}
-          ariaLabel={dataTypeLabel}
         />
         <EntityValue
           entityValueLabel={entityValueLabel}

src/Explorer/Controls/ThroughputInput/ThroughputInput.less

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

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -226,6 +226,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
               target="_blank"
               href="https://cosmos.azure.com/capacitycalculator/"
               aria-label="capacity calculator of azure cosmos db"
+              className="capacitycalculator-link"
             >
               capacity calculator
             </Link>

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -714,11 +714,13 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
              
             <StyledLinkBase
               aria-label="capacity calculator of azure cosmos db"
+              className="capacitycalculator-link"
               href="https://cosmos.azure.com/capacitycalculator/"
               target="_blank"
             >
               <LinkBase
                 aria-label="capacity calculator of azure cosmos db"
+                className="capacitycalculator-link"
                 href="https://cosmos.azure.com/capacitycalculator/"
                 styles={[Function]}
                 target="_blank"
@@ -998,7 +1000,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
               >
                 <a
                   aria-label="capacity calculator of azure cosmos db"
-                  className="ms-Link root-60"
+                  className="ms-Link capacitycalculator-link root-60"
                   href="https://cosmos.azure.com/capacitycalculator/"
                   onClick={[Function]}
                   target="_blank"

tsconfig.strict.json

@@ -135,6 +135,7 @@
     "./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"
   ],
@@ -162,4 +163,4 @@
     "src/Terminal/**/*",
     "src/Utils/arm/**/*"
   ]
-}
+}