Fix execute Query 'Results' and 'Query status' section controls gets truncated at 200% resize mode of 'Query1' blade (#1105)

* Fix a11y querytab results section zoom section issue

* Update test smapshot

* Update test snapshot

* Resolved test case issue

less/documentDB.less

@@ -2357,6 +2357,8 @@ a:link {
   height: 100%;
   flex-grow: 1;
   overflow: hidden;
+  min-height: 300px;
+  overflow-y: scroll;
 }
 
 .tabs {
@@ -2832,7 +2834,7 @@ a:link {
 
 #explorerNotificationConsole {
   z-index: 1000;
-  overflow-y:auto;
+  overflow-y: auto;
   overflow-x: clip;
 }
 

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

@@ -83,11 +83,11 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
       >
         The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
          
-        <a
+        <StyledLinkBase
           href="https://aka.ms/cosmos-autoscale-migration"
         >
           Learn more
-        </a>
+        </StyledLinkBase>
       </Text>
     </StyledMessageBar>
     <StyledChoiceGroup

src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap

@@ -167,11 +167,11 @@ exports[`SettingsUtils functions render 1`] = `
   >
     The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
      
-    <a
+    <StyledLinkBase
       href="https://aka.ms/cosmos-autoscale-migration"
     >
       Learn more
-    </a>
+    </StyledLinkBase>
   </Text>
   <Text
     styles={

src/Explorer/Graph/GraphExplorerComponent/graphExplorer.less

@@ -15,9 +15,9 @@
 
 .graphExplorerContainer {
   margin-left: @SmallSpace;
-    overflow-y:auto;
+  overflow-y: auto;
   overflow-x: clip;
-    height:100%;
+  height: 100%;
   .flex-display();
   .flex-direction();
 
@@ -61,7 +61,7 @@
   .loadGraphHelper {
     margin: auto;
     text-align: center;
-        height:50%;
+    height: 50%;
 
     img {
       width: @LoadGraphHelperWidth;
@@ -73,7 +73,7 @@
       margin: @DefaultSpace;
     }
 
-        .loadGraphBtn{
+    .loadGraphBtn {
       margin-top: @LargeSpace;
     }
   }
@@ -95,17 +95,17 @@
   }
 
   /* Override bootstrap's nav pills */
-    .nav-pills>li.active>a,
+  .nav-pills > li.active > a,
-    .nav-pills>li.active>a:focus,
+  .nav-pills > li.active > a:focus,
-    .nav-pills>li.active>a:hover {
+  .nav-pills > li.active > a:hover {
     background-color: @AccentMediumHigh;
   }
 
-    .nav-pills>li>a {
+  .nav-pills > li > a {
     border-radius: 0px;
   }
 
-    .nav>li>a {
+  .nav > li > a {
     padding: 5px 15px;
   }
 
@@ -115,16 +115,16 @@
 
   .typeahead__cancel-button {
     top: 5px !important;
-        right: .4em !important;
+    right: 0.4em !important;
   }
 
-
   .queryMetricsSummary {
     margin: @LargeSpace @LargeSpace 0px @DefaultSpace;
     table-layout: fixed;
     display: block;
     overflow-y: auto;
     overflow-x: hidden;
+    min-height: 100px;
 
     .queryMetricsSummaryHead {
       .flex-display();
@@ -145,7 +145,8 @@
       font-size: 12px;
       width: 100%;
       .flex-display();
-            th, td {
+      th,
+      td {
         padding: @DefaultSpace;
 
         &:nth-child(1) {
@@ -169,7 +170,6 @@
     }
   }
 
-
   .graphContainer {
     overflow: hidden;
     height: 100%;
@@ -177,7 +177,6 @@
     padding-top: (2 * @MediumSpace);
     .flex-display();
 
-
     .leftPane {
       width: 200px;
       padding: 0px 0px 0px @DefaultSpace;
@@ -225,8 +224,8 @@
       .graphTitle {
         margin-top: @DefaultSpace;
 
-                .graphExpandCollapseBtn{
+        .graphExpandCollapseBtn {
-                    padding:2px 6px 5px 6px;
+          padding: 2px 6px 5px 6px;
           margin-right: @SmallSpace;
 
           &:hover {
@@ -237,7 +236,7 @@
             .active();
           }
 
-                    img{
+          img {
             .dataExplorerIcons();
           }
         }
@@ -250,7 +249,7 @@
         height: 100%;
 
         .graphModal {
-                    background-color: rgba(255, 255, 255, .7);
+          background-color: rgba(255, 255, 255, 0.7);
           position: absolute;
           top: 0px;
           left: 0px;
@@ -283,7 +282,6 @@
           min-height: 0px;
           margin-top: 0px;
 
-
           .rightPaneHeader {
             /* TODO: Hack to align the trashbox with the header for now. */
             margin-top: -28px;
@@ -407,16 +405,16 @@
 
               .propertyTableHeader {
                 font-weight: bold;
-                                color: @DefaultFontColor ;
+                color: @DefaultFontColor;
                 border-bottom: 1px solid @BaseMediumHigh;
               }
 
               /* Override autocomplete stuff */
               .typeahead__container {
-                                                    font: @mediumFontSize 'Segoe UI' !important;
+                font: @mediumFontSize "Segoe UI" !important;
 
                 input {
-                                                        font: @mediumFontSize 'Segoe UI' !important;
+                  font: @mediumFontSize "Segoe UI" !important;
                   padding: 0px @SmallSpace !important;
                 }
               }
@@ -427,12 +425,12 @@
 
               .typeahead__cancel-button {
                 top: 5px !important;
-                                right: .4em !important;
+                right: 0.4em !important;
               }
 
               .rightPaneAddPropertyBtn {
                 padding: @DefaultSpace;
-                                margin-left: -8px;/* TODO: Hack to align the addproperty button with the section content for now. */
+                margin-left: -8px; /* TODO: Hack to align the addproperty button with the section content for now. */
 
                 img {
                   margin: 0px @SmallSpace @SmallSpace 0px;
@@ -451,6 +449,8 @@
     .flex-direction();
     overflow: hidden;
     width: 100%;
+    min-height: 200px;
+    overflow: auto;
   }
 
   .paneTitle {
@@ -587,7 +587,7 @@
 
   .loadmore {
     use.loadMoreIcon {
-            fill:@GraphNodeDefaultColor;
+      fill: @GraphNodeDefaultColor;
 
       &.active {
         fill: @AccentMediumHigh;
@@ -609,8 +609,6 @@
         opacity: 0;
       }
     }
-
-
   }
 
   /* scroll for leftpane, rightpane and newvertex pane*/

src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.test.tsx

@@ -29,6 +29,7 @@ describe("Table query select Panel", () => {
   it("Should checked availableCheckbox by default", () => {
     const wrapper = mount(<TableQuerySelectPanel {...props} />);
     expect(wrapper.find("#availableCheckbox").first().props()).toEqual({
+      ariaPositionInSet: 0,
       id: "availableCheckbox",
       label: "Available Columns",
       checked: true,

src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap

@@ -37,12 +37,14 @@ exports[`Table query select Panel should render Default properly 1`] = `
             className="column-select-view"
           >
             <StyledCheckboxBase
+              ariaPositionInSet={0}
               checked={true}
               id="availableCheckbox"
               label="Available Columns"
               onChange={[Function]}
             >
               <CheckboxBase
+                ariaPositionInSet={0}
                 checked={true}
                 id="availableCheckbox"
                 label="Available Columns"
@@ -328,6 +330,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                   <input
                     aria-checked="true"
                     aria-label="Available Columns"
+                    aria-posinset={0}
                     checked={true}
                     className="input-55"
                     data-ktp-execute-target={true}
@@ -646,6 +649,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
               </CheckboxBase>
             </StyledCheckboxBase>
             <StyledCheckboxBase
+              ariaPositionInSet={1}
               checked={true}
               disabled={false}
               key=""
@@ -653,6 +657,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
               onChange={[Function]}
             >
               <CheckboxBase
+                ariaPositionInSet={1}
                 checked={true}
                 disabled={false}
                 label=""
@@ -939,6 +944,7 @@ exports[`Table query select Panel should render Default properly 1`] = `
                     aria-checked="true"
                     aria-disabled={false}
                     aria-label=""
+                    aria-posinset={1}
                     checked={true}
                     className="input-55"
                     data-ktp-execute-target={true}

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -999,7 +999,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                               "data-order": 2,
                               "data-title": "Query Stats",
                             }}
-                            style={{ height: "100%" }}
+                            style={{ height: "100%", overflowY: "scroll" }}
                           >
                             {this.state.allResultsMetadata.length > 0 && !this.state.error && (
                               <div className="queryMetricsSummaryContainer">