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:
parent
94a03e5b03
commit
42bdcaf8d1
|
@ -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;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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() && (
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue