random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-05-06 16:36:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

defect1722595 Bug 1722595: [Screen readers Azure Cosmos DB Scale& Settings: Screen reader (NVDA) is not announcing status message which is displayed on the screen after radio button is selected under scale tab.

Browse Source
This commit is contained in:
Sampath 2022-12-23 18:39:13 +05:30
parent 6defcfb7e5
commit 610b559469
2 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
View File

@ -1,9 +1,12 @@
import { mergeStyleSets } from "@fluentui/merge-styles";
import { import {
Checkbox, Checkbox,
ChoiceGroup, ChoiceGroup,
FontIcon, FontIcon,
IChoiceGroupOption, IChoiceGroupOption,
IColumn, IColumn,
Icon,
initializeIcons,
Label, Label,
Link, Link,
MessageBar, MessageBar,
@ -82,7 +85,7 @@ interface ThroughputInputAutoPilotV3State {
spendAckChecked: boolean; spendAckChecked: boolean;
exceedFreeTierThroughput: boolean; exceedFreeTierThroughput: boolean;
} }
initializeIcons();
export class ThroughputInputAutoPilotV3Component extends React.Component< export class ThroughputInputAutoPilotV3Component extends React.Component<
ThroughputInputAutoPilotV3Props, ThroughputInputAutoPilotV3Props,
ThroughputInputAutoPilotV3State ThroughputInputAutoPilotV3State
@ -620,13 +623,20 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
if (this.IsComponentDirty().isDiscardable) { if (this.IsComponentDirty().isDiscardable) {
warningMessage = saveThroughputWarningMessage; warningMessage = saveThroughputWarningMessage;
} }
const classNames = mergeStyleSets({
orange: [{ color: "orange" }],
});
return ( return (
<> <>
{warningMessage && ( {warningMessage && (
<MessageBar messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}> // <MessageBar messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}>
// {warningMessage}
// </MessageBar>
<div className="warningonmanual" role="alert" aria-atomic="true">
<Icon iconName="WarningSolid" className={classNames.orange} />
{warningMessage} {warningMessage}
</MessageBar> </div>
)} )}
</> </>
); );

17
src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
View File

@ -8,14 +8,15 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
} }
} }
> >
<StyledMessageBar <div
messageBarIconProps={ aria-atomic="true"
Object { className="warningonmanual"
"className": "messageBarWarningIcon", role="alert"
"iconName": "WarningSolid",
}
}
> >
<Icon
className="orange-53"
iconName="WarningSolid"
/>
<Text <Text
styles={ styles={
Object { Object {
@ -28,7 +29,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
> >
Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes
</Text> </Text>
</StyledMessageBar> </div>
<Stack> <Stack>
<StyledLabelBase <StyledLabelBase
id="settingsV2RadioButtonLabelId" id="settingsV2RadioButtonLabelId"