Fix radio buttons present under 'Settings' blade like ‘Custom and Unlimited’ along with its label ‘Page options’ are not enclosed in fieldset/legend tag (#1100)

* Fix a11y setting pane radiobuttons issue

* Update test snapshot issue

less/documentDB.less

@@ -2869,7 +2869,6 @@ a:link {
   }
 }
 
-settings-pane {
 .settingsSection {
   border-bottom: 1px solid @BaseMedium;
   margin-right: 24px;
@@ -2877,6 +2876,7 @@ settings-pane {
 
   &:first-child {
     padding-top: 0px;
+    padding-bottom: 10px;
   }
 
   &:last-child {
@@ -2889,13 +2889,13 @@ settings-pane {
 
   .settingsSectionLabel {
     margin-bottom: @DefaultSpace;
+    margin-right: 5px;
   }
 
   .pageOptionsPart {
     padding-bottom: @MediumSpace;
   }
 }
-}
 
 // TODO: Remove these styles once we refactor all buttons to use the command button component
 @ButtonIconSize: 18px;

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton } from "@fluentui/react";
+import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton, Stack, Text } from "@fluentui/react";
 import * as Constants from "Common/Constants";
 import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
 import { configContext } from "ConfigContext";
@@ -113,20 +113,44 @@ export const SettingsPane: FunctionComponent = () => {
   const handleOnPageOptionChange = (ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void => {
     setPageOption(option.key);
   };
+
+  const choiceButtonStyles = {
+    flexContainer: [
+      {
+        selectors: {
+          ".ms-ChoiceField-wrapper label": {
+            fontSize: 12,
+            paddingTop: 0,
+          },
+          ".ms-ChoiceField": {
+            marginTop: 0,
+          },
+        },
+      },
+    ],
+  };
   return (
     <RightPaneForm {...genericPaneProps}>
       <div className="paneMainContent">
         {shouldShowQueryPageOptions && (
           <div className="settingsSection">
-            <div className="settingsSectionPart pageOptionsPart">
-              <div className="settingsSectionLabel">
+            <div className="settingsSectionPart">
+              <Stack horizontal>
+                <Text id="pageOptions" className="settingsSectionLabel" variant="small">
                   Page options
+                </Text>
                 <InfoTooltip>
                   Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many
                   query results per page.
                 </InfoTooltip>
-              </div>
-              <ChoiceGroup selectedKey={pageOption} options={pageOptionList} onChange={handleOnPageOptionChange} />
+              </Stack>
+              <ChoiceGroup
+                ariaLabelledBy="pageOptions"
+                selectedKey={pageOption}
+                options={pageOptionList}
+                styles={choiceButtonStyles}
+                onChange={handleOnPageOptionChange}
+              />
             </div>
             <div className="tabs settingsSectionPart">
               {isCustomPageOptionSelected() && (

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

@@ -14,17 +14,24 @@ exports[`Settings Pane should render Default properly 1`] = `
       className="settingsSection"
     >
       <div
-        className="settingsSectionPart pageOptionsPart"
+        className="settingsSectionPart"
       >
-        <div
+        <Stack
+          horizontal={true}
+        >
+          <Text
             className="settingsSectionLabel"
+            id="pageOptions"
+            variant="small"
           >
             Page options
+          </Text>
           <InfoTooltip>
             Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many query results per page.
           </InfoTooltip>
-        </div>
+        </Stack>
         <StyledChoiceGroup
+          ariaLabelledBy="pageOptions"
           onChange={[Function]}
           options={
             Array [
@@ -39,6 +46,23 @@ exports[`Settings Pane should render Default properly 1`] = `
             ]
           }
           selectedKey="custom"
+          styles={
+            Object {
+              "flexContainer": Array [
+                Object {
+                  "selectors": Object {
+                    ".ms-ChoiceField": Object {
+                      "marginTop": 0,
+                    },
+                    ".ms-ChoiceField-wrapper label": Object {
+                      "fontSize": 12,
+                      "paddingTop": 0,
+                    },
+                  },
+                },
+              ],
+            }
+          }
         />
       </div>
       <div