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
This commit is contained in:
vaidankarswapnil 2021-11-25 09:30:06 +05:30 committed by GitHub
parent 94a03e5b03
commit 42bdcaf8d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 79 additions and 31 deletions

View File

@ -2869,31 +2869,31 @@ a:link {
} }
} }
settings-pane { .settingsSection {
.settingsSection { border-bottom: 1px solid @BaseMedium;
border-bottom: 1px solid @BaseMedium; margin-right: 24px;
margin-right: 24px; padding: @MediumSpace 0px;
padding: @MediumSpace 0px;
&:first-child { &:first-child {
padding-top: 0px; padding-top: 0px;
} padding-bottom: 10px;
}
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
.settingsSectionPart { .settingsSectionPart {
padding-left: 8px; padding-left: 8px;
} }
.settingsSectionLabel { .settingsSectionLabel {
margin-bottom: @DefaultSpace; margin-bottom: @DefaultSpace;
} margin-right: 5px;
}
.pageOptionsPart { .pageOptionsPart {
padding-bottom: @MediumSpace; padding-bottom: @MediumSpace;
}
} }
} }

View File

@ -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 * 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";
@ -113,20 +113,44 @@ export const SettingsPane: FunctionComponent = () => {
const handleOnPageOptionChange = (ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void => { const handleOnPageOptionChange = (ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void => {
setPageOption(option.key); setPageOption(option.key);
}; };
const choiceButtonStyles = {
flexContainer: [
{
selectors: {
".ms-ChoiceField-wrapper label": {
fontSize: 12,
paddingTop: 0,
},
".ms-ChoiceField": {
marginTop: 0,
},
},
},
],
};
return ( return (
<RightPaneForm {...genericPaneProps}> <RightPaneForm {...genericPaneProps}>
<div className="paneMainContent"> <div className="paneMainContent">
{shouldShowQueryPageOptions && ( {shouldShowQueryPageOptions && (
<div className="settingsSection"> <div className="settingsSection">
<div className="settingsSectionPart pageOptionsPart"> <div className="settingsSectionPart">
<div className="settingsSectionLabel"> <Stack horizontal>
Page options <Text id="pageOptions" className="settingsSectionLabel" variant="small">
Page options
</Text>
<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>
</div> </Stack>
<ChoiceGroup selectedKey={pageOption} options={pageOptionList} onChange={handleOnPageOptionChange} /> <ChoiceGroup
ariaLabelledBy="pageOptions"
selectedKey={pageOption}
options={pageOptionList}
styles={choiceButtonStyles}
onChange={handleOnPageOptionChange}
/>
</div> </div>
<div className="tabs settingsSectionPart"> <div className="tabs settingsSectionPart">
{isCustomPageOptionSelected() && ( {isCustomPageOptionSelected() && (

View File

@ -14,17 +14,24 @@ exports[`Settings Pane should render Default properly 1`] = `
className="settingsSection" className="settingsSection"
> >
<div <div
className="settingsSectionPart pageOptionsPart" className="settingsSectionPart"
> >
<div <Stack
className="settingsSectionLabel" horizontal={true}
> >
Page options <Text
className="settingsSectionLabel"
id="pageOptions"
variant="small"
>
Page options
</Text>
<InfoTooltip> <InfoTooltip>
Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many query results per page. Choose Custom to specify a fixed amount of query results to show, or choose Unlimited to show as many query results per page.
</InfoTooltip> </InfoTooltip>
</div> </Stack>
<StyledChoiceGroup <StyledChoiceGroup
ariaLabelledBy="pageOptions"
onChange={[Function]} onChange={[Function]}
options={ options={
Array [ Array [
@ -39,6 +46,23 @@ exports[`Settings Pane should render Default properly 1`] = `
] ]
} }
selectedKey="custom" 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>
<div <div