random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-02-18 02:07:04 +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 {
ChangeFeedPolicyState,
GeospatialConfigType,
getSanitizedInputValue,
IsComponentDirtyResult,
isDirty,
TtlOff,
TtlOn,
TtlOnNoDefault,
TtlType,
getSanitizedInputValue,
isDirty,
} from "../SettingsUtils";
import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
@ -55,6 +55,18 @@ export interface SubSettingsComponentProps {
onSubSettingsSaveableChange: (isSubSettingsSaveable: 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> {
private shouldCheckComponentIsDirty = true;
@ -197,17 +209,26 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
</MessageBar>
)}
{this.props.timeToLive === TtlType.On && (
<TextField
id="timeToLiveSeconds"
styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)}
type="number"
required
min={1}
max={Int32.Max}
value={this.props.timeToLiveSeconds?.toString()}
onChange={this.onTimeToLiveSecondsChange}
suffix="second(s)"
/>
<div>
<span id="timetoliveon" style={stylingforvisuallyhiddenspan}>
Time to live on
</span>
<TextField
id="timeToLiveSeconds"
styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)}
type="number"
required
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>
);

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

@ -59,31 +59,68 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
}
}
/>
<StyledTextFieldBase
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,
},
<div>
<span
id="timetoliveon"
style={
Object {
"border": 0,
"clip": "rect(0 0 0 0)",
"height": "1px",
"margin": "-1px",
"overflow": "hidden",
"padding": 0,
"position": "absolute",
"width": "1px",
}
}
}
suffix="second(s)"
type="number"
value="1000"
/>
>
Time to live on
</span>
<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>
<StyledChoiceGroup
id="geoSpatialConfig"
@ -283,31 +320,68 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
}
}
/>
<StyledTextFieldBase
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,
},
<div>
<span
id="timetoliveon"
style={
Object {
"border": 0,
"clip": "rect(0 0 0 0)",
"height": "1px",
"margin": "-1px",
"overflow": "hidden",
"padding": 0,
"position": "absolute",
"width": "1px",
}
}
}
suffix="second(s)"
type="number"
value="1000"
/>
>
Time to live on
</span>
<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>
<StyledChoiceGroup
id="geoSpatialConfig"
@ -560,31 +634,68 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
}
}
/>
<StyledTextFieldBase
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,
},
<div>
<span
id="timetoliveon"
style={
Object {
"border": 0,
"clip": "rect(0 0 0 0)",
"height": "1px",
"margin": "-1px",
"overflow": "hidden",
"padding": 0,
"position": "absolute",
"width": "1px",
}
}
}
suffix="second(s)"
type="number"
value="1000"
/>
>
Time to live on
</span>
<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>
<StyledChoiceGroup
id="geoSpatialConfig"
@ -799,31 +910,68 @@ exports[`SubSettingsComponent renders 1`] = `
}
}
/>
<StyledTextFieldBase
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,
},
<div>
<span
id="timetoliveon"
style={
Object {
"border": 0,
"clip": "rect(0 0 0 0)",
"height": "1px",
"margin": "-1px",
"overflow": "hidden",
"padding": 0,
"position": "absolute",
"width": "1px",
}
}
}
suffix="second(s)"
type="number"
value="1000"
/>
>
Time to live on
</span>
<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>
<StyledChoiceGroup
id="geoSpatialConfig"