From 7dbccff41dca0fd3eed29bd358a674d0bcc4de16 Mon Sep 17 00:00:00 2001
From: MokireddySampath <120497218+MokireddySampath@users.noreply.github.com>
Date: Wed, 1 Feb 2023 22:20:03 +0530
Subject: [PATCH] fix for defect 1703851&1703931 (#1379)

---
 .../ThroughputInput/ThroughputInput.tsx       | 18 +++++++++++----
 .../ThroughputInput.test.tsx.snap             | 22 +++++++++++--------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
index ab4c45c03..c4b3d936c 100644
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -186,6 +186,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
 
       <Stack horizontal verticalAlign="center">
         <input
+          id="Autoscale-input"
           className="throughputInputRadioBtn"
           aria-label="Autoscale mode"
           aria-required={true}
@@ -195,9 +196,12 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           tabIndex={0}
           onChange={(e) => handleOnChangeMode(e, "Autoscale")}
         />
-        <span className="throughputInputRadioBtnLabel">Autoscale</span>
+        <label htmlFor="Autoscale-input" className="throughputInputRadioBtnLabel">
+          Autoscale
+        </label>
 
         <input
+          id="Manual-input"
           className="throughputInputRadioBtn"
           aria-label="Manual mode"
           checked={!isAutoscaleSelected}
@@ -207,14 +211,20 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           tabIndex={0}
           onChange={(e) => handleOnChangeMode(e, "Manual")}
         />
-        <span className="throughputInputRadioBtnLabel">Manual</span>
+        <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
+          Manual
+        </label>
       </Stack>
 
       {isAutoscaleSelected && (
         <Stack className="throughputInputSpacing">
-          <Text variant="small" aria-label="ruDescription">
+          <Text variant="small" aria-label="capacity calculator of azure cosmos db">
             Estimate your required RU/s with{" "}
-            <Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/" aria-label="ruDescription">
+            <Link
+              target="_blank"
+              href="https://cosmos.azure.com/capacitycalculator/"
+              aria-label="capacity calculator of azure cosmos db"
+            >
               capacity calculator
             </Link>
             .
diff --git a/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap b/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
index bfe811a96..587eee9dc 100644
--- a/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
+++ b/src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap
@@ -659,35 +659,39 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           aria-required={true}
           checked={true}
           className="throughputInputRadioBtn"
+          id="Autoscale-input"
           key=".0:$.0"
           onChange={[Function]}
           role="radio"
           tabIndex={0}
           type="radio"
         />
-        <span
+        <label
           className="throughputInputRadioBtnLabel"
+          htmlFor="Autoscale-input"
           key=".0:$.1"
         >
           Autoscale
-        </span>
+        </label>
         <input
           aria-label="Manual mode"
           aria-required={true}
           checked={false}
           className="throughputInputRadioBtn"
+          id="Manual-input"
           key=".0:$.2"
           onChange={[Function]}
           role="radio"
           tabIndex={0}
           type="radio"
         />
-        <span
+        <label
           className="throughputInputRadioBtnLabel"
+          htmlFor="Manual-input"
           key=".0:$.3"
         >
           Manual
-        </span>
+        </label>
       </div>
     </Stack>
     <Stack
@@ -697,23 +701,23 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
         className="ms-Stack throughputInputSpacing css-59"
       >
         <Text
-          aria-label="ruDescription"
+          aria-label="capacity calculator of azure cosmos db"
           key=".0:$.0"
           variant="small"
         >
           <span
-            aria-label="ruDescription"
+            aria-label="capacity calculator of azure cosmos db"
             className="css-54"
           >
             Estimate your required RU/s with
              
             <StyledLinkBase
-              aria-label="ruDescription"
+              aria-label="capacity calculator of azure cosmos db"
               href="https://cosmos.azure.com/capacitycalculator/"
               target="_blank"
             >
               <LinkBase
-                aria-label="ruDescription"
+                aria-label="capacity calculator of azure cosmos db"
                 href="https://cosmos.azure.com/capacitycalculator/"
                 styles={[Function]}
                 target="_blank"
@@ -992,7 +996,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                 }
               >
                 <a
-                  aria-label="ruDescription"
+                  aria-label="capacity calculator of azure cosmos db"
                   className="ms-Link root-60"
                   href="https://cosmos.azure.com/capacitycalculator/"
                   onClick={[Function]}