random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

* Fix a11y setting pane radiobuttons issue

* Update test snapshot issue

* Implemented fieldset and legend for ChoiceGroup in HTML

* cleanup
This commit is contained in:
vaidankarswapnil 2021-12-16 01:52:15 +05:30 committed by GitHub
parent 6351e2bcd2
commit de58f570cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
less/documentDB.less
View File

@ -2895,6 +2895,14 @@ a:link {
.pageOptionsPart { .pageOptionsPart {
padding-bottom: @MediumSpace; 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 // TODO: Remove these styles once we refactor all buttons to use the command button component

32
src/Explorer/Panes/SettingsPane/SettingsPane.tsx
View File

@ -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 * as Constants from "Common/Constants";
import { InfoTooltip } from "Common/Tooltip/InfoTooltip"; import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
import { configContext } from "ConfigContext"; import { configContext } from "ConfigContext";
@ -115,9 +115,15 @@ export const SettingsPane: FunctionComponent = () => {
}; };
const choiceButtonStyles = { const choiceButtonStyles = {
root: {
clear: "both",
},
flexContainer: [ flexContainer: [
{ {
selectors: { selectors: {
".ms-ChoiceFieldGroup root-133": {
clear: "both",
},
".ms-ChoiceField-wrapper label": { ".ms-ChoiceField-wrapper label": {
fontSize: 12, fontSize: 12,
paddingTop: 0, paddingTop: 0,
@ -135,22 +141,22 @@ export const SettingsPane: FunctionComponent = () => {
{shouldShowQueryPageOptions && ( {shouldShowQueryPageOptions && (
<div className="settingsSection"> <div className="settingsSection">
<div className="settingsSectionPart"> <div className="settingsSectionPart">
<Stack horizontal> <fieldset>
<Text id="pageOptions" className="settingsSectionLabel" variant="small"> <legend id="pageOptions" className="settingsSectionLabel legendLabel">
Page options Page Options
</Text> </legend>
<InfoTooltip> <InfoTooltip>
Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many
query results per page. query results per page.
</InfoTooltip> </InfoTooltip>
</Stack> <ChoiceGroup
<ChoiceGroup ariaLabelledBy="pageOptions"
ariaLabelledBy="pageOptions" selectedKey={pageOption}
selectedKey={pageOption} options={pageOptionList}
options={pageOptionList} styles={choiceButtonStyles}
styles={choiceButtonStyles} onChange={handleOnPageOptionChange}
onChange={handleOnPageOptionChange} />
/> </fieldset>
</div> </div>
<div className="tabs settingsSectionPart"> <div className="tabs settingsSectionPart">
{isCustomPageOptionSelected() && ( {isCustomPageOptionSelected() && (