mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-07-06 12:05:06 +01:00
Changes made for the screenreader to readout the label and suffix associated with the input
This commit is contained in:
parent
755b732532
commit
10586d44f8
@ -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,6 +209,10 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
|
||||
</MessageBar>
|
||||
)}
|
||||
{this.props.timeToLive === TtlType.On && (
|
||||
<div>
|
||||
<span id="timetoliveon" style={stylingforvisuallyhiddenspan}>
|
||||
Time to live on
|
||||
</span>
|
||||
<TextField
|
||||
id="timeToLiveSeconds"
|
||||
styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)}
|
||||
@ -207,7 +223,12 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
|
||||
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>
|
||||
);
|
||||
|
@ -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
|
||||
aria-labelledby="timetoliveon secondssuffixforscreenreader"
|
||||
id="timeToLiveSeconds"
|
||||
max={2147483647}
|
||||
min={1}
|
||||
@ -84,6 +103,24 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
|
||||
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,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
|
||||
aria-labelledby="timetoliveon secondssuffixforscreenreader"
|
||||
id="timeToLiveSeconds"
|
||||
max={2147483647}
|
||||
min={1}
|
||||
@ -308,6 +364,24 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
|
||||
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,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
|
||||
aria-labelledby="timetoliveon secondssuffixforscreenreader"
|
||||
id="timeToLiveSeconds"
|
||||
max={2147483647}
|
||||
min={1}
|
||||
@ -585,6 +678,24 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
|
||||
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,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
|
||||
aria-labelledby="timetoliveon secondssuffixforscreenreader"
|
||||
id="timeToLiveSeconds"
|
||||
max={2147483647}
|
||||
min={1}
|
||||
@ -824,6 +954,24 @@ exports[`SubSettingsComponent renders 1`] = `
|
||||
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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user