From 610b559469eb858672df7183d1bd91208113ae59 Mon Sep 17 00:00:00 2001
From: Sampath <v-smokireddy@microsoft.com>
Date: Fri, 23 Dec 2022 18:39:13 +0530
Subject: [PATCH] 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.

---
 .../ThroughputInputAutoPilotV3Component.tsx     | 16 +++++++++++++---
 ...ghputInputAutoPilotV3Component.test.tsx.snap | 17 +++++++++--------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
index 2a508412d..dd857953a 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/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>
         )}
       </>
     );
diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
index efc16b929..c14ea033b 100644
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap
@@ -8,14 +8,15 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
     }
   }
 >
-  <StyledMessageBar
-    messageBarIconProps={
-      Object {
-        "className": "messageBarWarningIcon",
-        "iconName": "WarningSolid",
-      }
-    }
+  <div
+    aria-atomic="true"
+    className="warningonmanual"
+    role="alert"
   >
+    <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"