From de58f570cda9b5276f6029c0324da0ffba1949dd Mon Sep 17 00:00:00 2001
From: vaidankarswapnil <81285216+vaidankarswapnil@users.noreply.github.com>
Date: Thu, 16 Dec 2021 01:52:15 +0530
Subject: [PATCH] =?UTF-8?q?Fix=20Radio=20buttons=20present=20under=20'Sett?=
 =?UTF-8?q?ings'=20blade=20like=20=E2=80=98Custom=20and=20Unlimited?=
 =?UTF-8?q?=E2=80=99=20along=20with=20its=20label=20=E2=80=98Page=20option?=
 =?UTF-8?q?s=E2=80=99=20are=20not=20enclosed=20in=20fieldset/legend=20tag?=
 =?UTF-8?q?=20(#1175)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix a11y setting pane radiobuttons issue

* Update test snapshot issue

* Implemented fieldset and legend for ChoiceGroup in HTML

* cleanup
---
 less/documentDB.less                          |  8 +++++
 .../Panes/SettingsPane/SettingsPane.tsx       | 32 +++++++++++--------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/less/documentDB.less b/less/documentDB.less
index 7ccaf4255..bc36d1483 100644
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -2895,6 +2895,14 @@ a:link {
   .pageOptionsPart {
     padding-bottom: @MediumSpace;
   }
+
+  .legendLabel {
+    border-bottom: 0px;
+    width: auto;
+    font-size: @mediumFontSize;
+    display: inline !important;
+    float: left;
+  }
 }
 
 // TODO: Remove these styles once we refactor all buttons to use the command button component
diff --git a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
index 2a06ce497..9abc63f82 100644
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton, Stack, Text } from "@fluentui/react";
+import { Checkbox, ChoiceGroup, IChoiceGroupOption, SpinButton } from "@fluentui/react";
 import * as Constants from "Common/Constants";
 import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
 import { configContext } from "ConfigContext";
@@ -115,9 +115,15 @@ export const SettingsPane: FunctionComponent = () => {
   };
 
   const choiceButtonStyles = {
+    root: {
+      clear: "both",
+    },
     flexContainer: [
       {
         selectors: {
+          ".ms-ChoiceFieldGroup root-133": {
+            clear: "both",
+          },
           ".ms-ChoiceField-wrapper label": {
             fontSize: 12,
             paddingTop: 0,
@@ -135,22 +141,22 @@ export const SettingsPane: FunctionComponent = () => {
         {shouldShowQueryPageOptions && (
           <div className="settingsSection">
             <div className="settingsSectionPart">
-              <Stack horizontal>
-                <Text id="pageOptions" className="settingsSectionLabel" variant="small">
-                  Page options
-                </Text>
+              <fieldset>
+                <legend id="pageOptions" className="settingsSectionLabel legendLabel">
+                  Page Options
+                </legend>
                 <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>
-              </Stack>
-              <ChoiceGroup
-                ariaLabelledBy="pageOptions"
-                selectedKey={pageOption}
-                options={pageOptionList}
-                styles={choiceButtonStyles}
-                onChange={handleOnPageOptionChange}
-              />
+                <ChoiceGroup
+                  ariaLabelledBy="pageOptions"
+                  selectedKey={pageOption}
+                  options={pageOptionList}
+                  styles={choiceButtonStyles}
+                  onChange={handleOnPageOptionChange}
+                />
+              </fieldset>
             </div>
             <div className="tabs settingsSectionPart">
               {isCustomPageOptionSelected() && (