random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-02-20 11:16:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changes made for the screenreader to readout the label and suffix associated with the input

Browse Source
This commit is contained in:
Sampath 2023-04-20 15:19:28 +05:30
parent 755b732532
commit 10586d44f8
2 changed files with 278 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
View File

@ -15,13 +15,13 @@ import {
import { import {
ChangeFeedPolicyState, ChangeFeedPolicyState,
GeospatialConfigType, GeospatialConfigType,
getSanitizedInputValue,
IsComponentDirtyResult, IsComponentDirtyResult,
isDirty,
TtlOff, TtlOff,
TtlOn, TtlOn,
TtlOnNoDefault, TtlOnNoDefault,
TtlType, TtlType,
getSanitizedInputValue,
isDirty,
} from "../SettingsUtils"; } from "../SettingsUtils";
import { ToolTipLabelComponent } from "./ToolTipLabelComponent"; import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
@ -55,6 +55,18 @@ export interface SubSettingsComponentProps {
onSubSettingsSaveableChange: (isSubSettingsSaveable: boolean) => void; onSubSettingsSaveableChange: (isSubSettingsSaveable: boolean) => void;
onSubSettingsDiscardableChange: (isSubSettingsDiscardable: boolean) => void; onSubSettingsDiscardableChange: (isSubSettingsDiscardable: boolean) => void;
} }
const stylingforvisuallyhiddenspan = {
position: "absolute",
width: "1px",
height: "1px",
margin: "-1px",
border: 0,
padding: 0,
clip: "rect(0 0 0 0)",
overflow: "hidden",
};
export class SubSettingsComponent extends React.Component<SubSettingsComponentProps> { export class SubSettingsComponent extends React.Component<SubSettingsComponentProps> {
private shouldCheckComponentIsDirty = true; private shouldCheckComponentIsDirty = true;
@ -197,17 +209,26 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
</MessageBar> </MessageBar>
)} )}
{this.props.timeToLive === TtlType.On && ( {this.props.timeToLive === TtlType.On && (
<TextField <div>
id="timeToLiveSeconds" <span id="timetoliveon" style={stylingforvisuallyhiddenspan}>
styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)} Time to live on
type="number" </span>
required <TextField
min={1} id="timeToLiveSeconds"
max={Int32.Max} styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)}
value={this.props.timeToLiveSeconds?.toString()} type="number"
onChange={this.onTimeToLiveSecondsChange} required
suffix="second(s)" min={1}
/> max={Int32.Max}
value={this.props.timeToLiveSeconds?.toString()}
onChange={this.onTimeToLiveSecondsChange}
suffix="second(s)"
aria-labelledby="timetoliveon secondssuffixforscreenreader"
/>
<span id="secondssuffixforscreenreader" style={stylingforvisuallyhiddenspan}>
Second(s)
</span>
</div>
)} )}
</Stack> </Stack>
); );

340
src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap
View File

@ -59,31 +59,68 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
} }
} }
/> />
<StyledTextFieldBase <div>
id="timeToLiveSeconds" <span
max={2147483647} id="timetoliveon"
min={1} style={
onChange={[Function]} Object {
required={true} "border": 0,
styles={ "clip": "rect(0 0 0 0)",
Object { "height": "1px",
"fieldGroup": Object { "margin": "-1px",
"borderColor": "", "overflow": "hidden",
"height": 25, "padding": 0,
"selectors": Object { "position": "absolute",
":disabled": Object { "width": "1px",
"backgroundColor": undefined, }
"borderColor": undefined,
},
},
"width": 300,
},
} }
} >
suffix="second(s)" Time to live on
type="number" </span>
value="1000" <StyledTextFieldBase
/> aria-labelledby="timetoliveon secondssuffixforscreenreader"
id="timeToLiveSeconds"
max={2147483647}
min={1}
onChange={[Function]}
required={true}
styles={
Object {
"fieldGroup": Object {
"borderColor": "",
"height": 25,
"selectors": Object {
":disabled": Object {
"backgroundColor": undefined,
"borderColor": undefined,
},
},
"width": 300,
},
}
}
suffix="second(s)"
type="number"
value="1000"
/>
<span
id="secondssuffixforscreenreader"
style={
Object {
"border": 0,
"clip": "rect(0 0 0 0)",
"height": "1px",
"margin": "-1px",
"overflow": "hidden",
"padding": 0,
"position": "absolute",
"width": "1px",
}
}
>
Second(s)
</span>
</div>
</Stack> </Stack>
<StyledChoiceGroup <StyledChoiceGroup
id="geoSpatialConfig" id="geoSpatialConfig"
@ -283,31 +320,68 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
} }
} }
/> />
<StyledTextFieldBase <div>
id="timeToLiveSeconds" <span
max={2147483647} id="timetoliveon"
min={1} style={
onChange={[Function]} Object {
required={true} "border": 0,
styles={ "clip": "rect(0 0 0 0)",
Object { "height": "1px",
"fieldGroup": Object { "margin": "-1px",
"borderColor": "", "overflow": "hidden",
"height": 25, "padding": 0,
"selectors": Object { "position": "absolute",
":disabled": Object { "width": "1px",
"backgroundColor": undefined, }
"borderColor": undefined,
},
},
"width": 300,
},
} }
} >
suffix="second(s)" Time to live on
type="number" </span>
value="1000" <StyledTextFieldBase
/> aria-labelledby="timetoliveon secondssuffixforscreenreader"
id="timeToLiveSeconds"
max={2147483647}
min={1}
onChange={[Function]}
required={true}
styles={
Object {
"fieldGroup": Object {
"borderColor": "",
"height": 25,
"selectors": Object {
":disabled": Object {
"backgroundColor": undefined,
"borderColor": undefined,
},
},
"width": 300,
},
}
}
suffix="second(s)"
type="number"
value="1000"
/>
<span
id="secondssuffixforscreenreader"
style={
Object {
"border": 0,
"clip": "rect(0 0 0 0)",
"height": "1px",
"margin": "-1px",
"overflow": "hidden",
"padding": 0,
"position": "absolute",
"width": "1px",
}
}
>
Second(s)
</span>
</div>
</Stack> </Stack>
<StyledChoiceGroup <StyledChoiceGroup
id="geoSpatialConfig" id="geoSpatialConfig"
@ -560,31 +634,68 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
} }
} }
/> />
<StyledTextFieldBase <div>
id="timeToLiveSeconds" <span
max={2147483647} id="timetoliveon"
min={1} style={
onChange={[Function]} Object {
required={true} "border": 0,
styles={ "clip": "rect(0 0 0 0)",
Object { "height": "1px",
"fieldGroup": Object { "margin": "-1px",
"borderColor": "", "overflow": "hidden",
"height": 25, "padding": 0,
"selectors": Object { "position": "absolute",
":disabled": Object { "width": "1px",
"backgroundColor": undefined, }
"borderColor": undefined,
},
},
"width": 300,
},
} }
} >
suffix="second(s)" Time to live on
type="number" </span>
value="1000" <StyledTextFieldBase
/> aria-labelledby="timetoliveon secondssuffixforscreenreader"
id="timeToLiveSeconds"
max={2147483647}
min={1}
onChange={[Function]}
required={true}
styles={
Object {
"fieldGroup": Object {
"borderColor": "",
"height": 25,
"selectors": Object {
":disabled": Object {
"backgroundColor": undefined,
"borderColor": undefined,
},
},
"width": 300,
},
}
}
suffix="second(s)"
type="number"
value="1000"
/>
<span
id="secondssuffixforscreenreader"
style={
Object {
"border": 0,
"clip": "rect(0 0 0 0)",
"height": "1px",
"margin": "-1px",
"overflow": "hidden",
"padding": 0,
"position": "absolute",
"width": "1px",
}
}
>
Second(s)
</span>
</div>
</Stack> </Stack>
<StyledChoiceGroup <StyledChoiceGroup
id="geoSpatialConfig" id="geoSpatialConfig"
@ -799,31 +910,68 @@ exports[`SubSettingsComponent renders 1`] = `
} }
} }
/> />
<StyledTextFieldBase <div>
id="timeToLiveSeconds" <span
max={2147483647} id="timetoliveon"
min={1} style={
onChange={[Function]} Object {
required={true} "border": 0,
styles={ "clip": "rect(0 0 0 0)",
Object { "height": "1px",
"fieldGroup": Object { "margin": "-1px",
"borderColor": "", "overflow": "hidden",
"height": 25, "padding": 0,
"selectors": Object { "position": "absolute",
":disabled": Object { "width": "1px",
"backgroundColor": undefined, }
"borderColor": undefined,
},
},
"width": 300,
},
} }
} >
suffix="second(s)" Time to live on
type="number" </span>
value="1000" <StyledTextFieldBase
/> aria-labelledby="timetoliveon secondssuffixforscreenreader"
id="timeToLiveSeconds"
max={2147483647}
min={1}
onChange={[Function]}
required={true}
styles={
Object {
"fieldGroup": Object {
"borderColor": "",
"height": 25,
"selectors": Object {
":disabled": Object {
"backgroundColor": undefined,
"borderColor": undefined,
},
},
"width": 300,
},
}
}
suffix="second(s)"
type="number"
value="1000"
/>
<span
id="secondssuffixforscreenreader"
style={
Object {
"border": 0,
"clip": "rect(0 0 0 0)",
"height": "1px",
"margin": "-1px",
"overflow": "hidden",
"padding": 0,
"position": "absolute",
"width": "1px",
}
}
>
Second(s)
</span>
</div>
</Stack> </Stack>
<StyledChoiceGroup <StyledChoiceGroup
id="geoSpatialConfig" id="geoSpatialConfig"