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.

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

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

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

@@ -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
       styles={
         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
     </Text>
-  </StyledMessageBar>
+  </div>
   <Stack>
     <StyledLabelBase
       id="settingsV2RadioButtonLabelId"