random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-02-21 11:47:14 +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

25
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,6 +209,10 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
</MessageBar> </MessageBar>
)} )}
{this.props.timeToLive === TtlType.On && ( {this.props.timeToLive === TtlType.On && (
<div>
<span id="timetoliveon" style={stylingforvisuallyhiddenspan}>
Time to live on
</span>
<TextField <TextField
id="timeToLiveSeconds" id="timeToLiveSeconds"
styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)} styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)}
@ -207,7 +223,12 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
value={this.props.timeToLiveSeconds?.toString()} value={this.props.timeToLiveSeconds?.toString()}
onChange={this.onTimeToLiveSecondsChange} onChange={this.onTimeToLiveSecondsChange}
suffix="second(s)" suffix="second(s)"
aria-labelledby="timetoliveon secondssuffixforscreenreader"
/> />
<span id="secondssuffixforscreenreader" style={stylingforvisuallyhiddenspan}>
Second(s)
</span>
</div>
)} )}
</Stack> </Stack>
); );

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

@ -59,7 +59,26 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
} }
} }
/> />
<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",
}
}
>
Time to live on
</span>
<StyledTextFieldBase <StyledTextFieldBase
aria-labelledby="timetoliveon secondssuffixforscreenreader"
id="timeToLiveSeconds" id="timeToLiveSeconds"
max={2147483647} max={2147483647}
min={1} min={1}
@ -84,6 +103,24 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
type="number" type="number"
value="1000" 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,7 +320,26 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
} }
} }
/> />
<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",
}
}
>
Time to live on
</span>
<StyledTextFieldBase <StyledTextFieldBase
aria-labelledby="timetoliveon secondssuffixforscreenreader"
id="timeToLiveSeconds" id="timeToLiveSeconds"
max={2147483647} max={2147483647}
min={1} min={1}
@ -308,6 +364,24 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
type="number" type="number"
value="1000" 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,7 +634,26 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
} }
} }
/> />
<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",
}
}
>
Time to live on
</span>
<StyledTextFieldBase <StyledTextFieldBase
aria-labelledby="timetoliveon secondssuffixforscreenreader"
id="timeToLiveSeconds" id="timeToLiveSeconds"
max={2147483647} max={2147483647}
min={1} min={1}
@ -585,6 +678,24 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
type="number" type="number"
value="1000" 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,7 +910,26 @@ exports[`SubSettingsComponent renders 1`] = `
} }
} }
/> />
<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",
}
}
>
Time to live on
</span>
<StyledTextFieldBase <StyledTextFieldBase
aria-labelledby="timetoliveon secondssuffixforscreenreader"
id="timeToLiveSeconds" id="timeToLiveSeconds"
max={2147483647} max={2147483647}
min={1} min={1}
@ -824,6 +954,24 @@ exports[`SubSettingsComponent renders 1`] = `
type="number" type="number"
value="1000" 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"