Fix/message bar remove background in hc

change/@fluentui-react-a39133e5-d27c-4a7e-8493-1324e7905f01.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: added border with correct contrast ratio in HC in MessageBar",
+  "packageName": "@fluentui/react",
+  "email": "vkozlova@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react/src/components/MessageBar/MessageBar.styles.ts

@@ -1,5 +1,6 @@
 import {
   HighContrastSelector,
+  HighContrastSelectorWhite,
   ScreenWidthMaxSmall,
   getScreenSelector,
   getGlobalClassNames,
@@ -43,15 +44,6 @@ const backgroundColor: { [key: string]: keyof ISemanticColors } = {
   [MessageBarType.info]: 'infoBackground',
 };
 
-const highContrastBackgroundColor: { [key: string]: string } = {
-  [MessageBarType.error]: 'rgba(255, 0, 0, 0.3)',
-  [MessageBarType.blocked]: 'rgba(255, 0, 0, 0.3)',
-  [MessageBarType.success]: 'rgba(48, 241, 73, 0.3)',
-  [MessageBarType.warning]: 'rgba(255, 254, 57, 0.3)',
-  [MessageBarType.severeWarning]: 'rgba(255, 0, 0, 0.3)',
-  [MessageBarType.info]: 'Window',
-};
-
 const iconColor: { [key: string]: keyof ISemanticColors } = {
   [MessageBarType.error]: 'errorIcon',
   [MessageBarType.blocked]: 'errorIcon',
@@ -61,6 +53,24 @@ const iconColor: { [key: string]: keyof ISemanticColors } = {
   [MessageBarType.info]: 'infoIcon',
 };
 
+const highContrastBorderColor: { [key: string]: string } = {
+  [MessageBarType.error]: '#ff0000',
+  [MessageBarType.blocked]: '#ff0000',
+  [MessageBarType.success]: '#bad80a',
+  [MessageBarType.warning]: '#fff100',
+  [MessageBarType.severeWarning]: '#ff0000',
+  [MessageBarType.info]: 'WindowText',
+};
+
+const highContrastWhiteBorderColor: { [key: string]: string } = {
+  [MessageBarType.error]: '#e81123',
+  [MessageBarType.blocked]: '#e81123',
+  [MessageBarType.success]: '#107c10',
+  [MessageBarType.warning]: '#966400',
+  [MessageBarType.severeWarning]: '#d83b01',
+  [MessageBarType.info]: 'WindowText',
+};
+
 export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => {
   const {
     theme,
@@ -130,6 +140,7 @@ export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => {
       !isMultiline && truncated && classNames.expandingSingleLine,
       {
         background: semanticColors[backgroundColor[messageBarType]],
+        boxSizing: 'border-box',
         color: semanticColors.messageText,
         minHeight: 32,
         width: '100%',
@@ -146,10 +157,13 @@ export const getStyles = (props: IMessageBarStyleProps): IMessageBarStyles => {
           },
           [HighContrastSelector]: {
             ...getHighContrastNoAdjustStyle(),
-            background: highContrastBackgroundColor[messageBarType],
-            border: '1px solid WindowText',
+            background: 'transparent',
+            border: `1px solid ${highContrastBorderColor[messageBarType]}`,
             color: 'WindowText',
           },
+          [HighContrastSelectorWhite]: {
+            border: `1px solid ${highContrastWhiteBorderColor[messageBarType]}`,
+          },
         },
       },
       isMultiline && {

packages/react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`MessageBar snapshots renders MessageBar correctly 1`] = `
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
         background: #f3f2f1;
+        box-sizing: border-box;
         color: #323130;
         display: flex;
         flex-direction: column;
@@ -27,11 +28,14 @@ exports[`MessageBar snapshots renders MessageBar correctly 1`] = `
       }
       @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
         -ms-high-contrast-adjust: none;
-        background: Window;
+        background: transparent;
         border: 1px solid WindowText;
         color: WindowText;
         forced-color-adjust: none;
       }
+      @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {
+        border: 1px solid WindowText;
+      }
 >
   <div
     className=
@@ -136,6 +140,7 @@ exports[`MessageBar snapshots renders a error MessageBar correctly 1`] = `
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
         background: #FDE7E9;
+        box-sizing: border-box;
         color: #323130;
         display: flex;
         flex-direction: column;
@@ -154,11 +159,14 @@ exports[`MessageBar snapshots renders a error MessageBar correctly 1`] = `
       }
       @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
         -ms-high-contrast-adjust: none;
-        background: rgba(255, 0, 0, 0.3);
-        border: 1px solid WindowText;
+        background: transparent;
+        border: 1px solid #ff0000;
         color: WindowText;
         forced-color-adjust: none;
       }
+      @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {
+        border: 1px solid #e81123;
+      }
 >
   <div
     className=
@@ -262,6 +270,7 @@ exports[`MessageBar snapshots renders a info MessageBar correctly 1`] = `
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
         background: #f3f2f1;
+        box-sizing: border-box;
         color: #323130;
         display: flex;
         flex-direction: column;
@@ -280,11 +289,14 @@ exports[`MessageBar snapshots renders a info MessageBar correctly 1`] = `
       }
       @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
         -ms-high-contrast-adjust: none;
-        background: Window;
+        background: transparent;
         border: 1px solid WindowText;
         color: WindowText;
         forced-color-adjust: none;
       }
+      @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {
+        border: 1px solid WindowText;
+      }
 >
   <div
     className=
@@ -388,6 +400,7 @@ exports[`MessageBar snapshots renders a multiline MessageBar correctly 1`] = `
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
         background: #f3f2f1;
+        box-sizing: border-box;
         color: #323130;
         display: flex;
         flex-direction: column;
@@ -406,11 +419,14 @@ exports[`MessageBar snapshots renders a multiline MessageBar correctly 1`] = `
       }
       @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
         -ms-high-contrast-adjust: none;
-        background: Window;
+        background: transparent;
         border: 1px solid WindowText;
         color: WindowText;
         forced-color-adjust: none;
       }
+      @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {
+        border: 1px solid WindowText;
+      }
 >
   <div
     className=
@@ -515,6 +531,7 @@ exports[`MessageBar snapshots renders a multiline error MessageBar correctly 1`]
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
         background: #FDE7E9;
+        box-sizing: border-box;
         color: #323130;
         display: flex;
         flex-direction: column;
@@ -533,11 +550,14 @@ exports[`MessageBar snapshots renders a multiline error MessageBar correctly 1`]
       }
       @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
         -ms-high-contrast-adjust: none;
-        background: rgba(255, 0, 0, 0.3);
-        border: 1px solid WindowText;
+        background: transparent;
+        border: 1px solid #ff0000;
         color: WindowText;
         forced-color-adjust: none;
       }
+      @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {
+        border: 1px solid #e81123;
+      }
 >
   <div
     className=
@@ -641,6 +661,7 @@ exports[`MessageBar snapshots renders a multiline info MessageBar correctly 1`]
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
         background: #f3f2f1;
+        box-sizing: border-box;
         color: #323130;
         display: flex;
         flex-direction: column;
@@ -659,11 +680,14 @@ exports[`MessageBar snapshots renders a multiline info MessageBar correctly 1`]
       }
       @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
         -ms-high-contrast-adjust: none;
-        background: Window;
+        background: transparent;
         border: 1px solid WindowText;
         color: WindowText;
         forced-color-adjust: none;
       }
+      @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {
+        border: 1px solid WindowText;
+      }
 >
   <div
     className=
@@ -768,6 +792,7 @@ exports[`MessageBar snapshots renders a multiline severeWarning MessageBar corre
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
         background: #FED9CC;
+        box-sizing: border-box;
         color: #323130;
         display: flex;
         flex-direction: column;
@@ -786,11 +811,14 @@ exports[`MessageBar snapshots renders a multiline severeWarning MessageBar corre
       }
       @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
         -ms-high-contrast-adjust: none;
-        background: rgba(255, 0, 0, 0.3);
-        border: 1px solid WindowText;
+        background: transparent;
+        border: 1px solid #ff0000;
         color: WindowText;
         forced-color-adjust: none;
       }
+      @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {
+        border: 1px solid #d83b01;
+      }
 >
   <div
     className=
@@ -895,6 +923,7 @@ exports[`MessageBar snapshots renders a multiline success MessageBar correctly 1
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
         background: #DFF6DD;
+        box-sizing: border-box;
         color: #323130;
         display: flex;
         flex-direction: column;
@@ -913,11 +942,14 @@ exports[`MessageBar snapshots renders a multiline success MessageBar correctly 1
       }
       @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
         -ms-high-contrast-adjust: none;
-        background: rgba(48, 241, 73, 0.3);
-        border: 1px solid WindowText;
+        background: transparent;
+        border: 1px solid #bad80a;
         color: WindowText;
         forced-color-adjust: none;
       }
+      @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {
+        border: 1px solid #107c10;
+      }
 >
   <div
     className=
@@ -1022,6 +1054,7 @@ exports[`MessageBar snapshots renders a multiline warning MessageBar correctly 1
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
         background: #FFF4CE;
+        box-sizing: border-box;
         color: #323130;
         display: flex;
         flex-direction: column;
@@ -1040,11 +1073,14 @@ exports[`MessageBar snapshots renders a multiline warning MessageBar correctly 1
       }
       @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
         -ms-high-contrast-adjust: none;
-        background: rgba(255, 254, 57, 0.3);
-        border: 1px solid WindowText;
+        background: transparent;
+        border: 1px solid #fff100;
         color: WindowText;
         forced-color-adjust: none;
       }
+      @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {
+        border: 1px solid #966400;
+      }
 >
   <div
     className=
@@ -1149,6 +1185,7 @@ exports[`MessageBar snapshots renders a severeWarning MessageBar correctly 1`] =
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
         background: #FED9CC;
+        box-sizing: border-box;
         color: #323130;
         display: flex;
         flex-direction: column;
@@ -1167,11 +1204,14 @@ exports[`MessageBar snapshots renders a severeWarning MessageBar correctly 1`] =
       }
       @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
         -ms-high-contrast-adjust: none;
-        background: rgba(255, 0, 0, 0.3);
-        border: 1px solid WindowText;
+        background: transparent;
+        border: 1px solid #ff0000;
         color: WindowText;
         forced-color-adjust: none;
       }
+      @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {
+        border: 1px solid #d83b01;
+      }
 >
   <div
     className=
@@ -1276,6 +1316,7 @@ exports[`MessageBar snapshots renders a success MessageBar correctly 1`] = `
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
         background: #DFF6DD;
+        box-sizing: border-box;
         color: #323130;
         display: flex;
         flex-direction: column;
@@ -1294,11 +1335,14 @@ exports[`MessageBar snapshots renders a success MessageBar correctly 1`] = `
       }
       @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
         -ms-high-contrast-adjust: none;
-        background: rgba(48, 241, 73, 0.3);
-        border: 1px solid WindowText;
+        background: transparent;
+        border: 1px solid #bad80a;
         color: WindowText;
         forced-color-adjust: none;
       }
+      @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {
+        border: 1px solid #107c10;
+      }
 >
   <div
     className=
@@ -1403,6 +1447,7 @@ exports[`MessageBar snapshots renders a warning MessageBar correctly 1`] = `
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
         background: #FFF4CE;
+        box-sizing: border-box;
         color: #323130;
         display: flex;
         flex-direction: column;
@@ -1421,11 +1466,14 @@ exports[`MessageBar snapshots renders a warning MessageBar correctly 1`] = `
       }
       @media screen and (-ms-high-contrast: active), screen and (forced-colors: active){& {
         -ms-high-contrast-adjust: none;
-        background: rgba(255, 254, 57, 0.3);
-        border: 1px solid WindowText;
+        background: transparent;
+        border: 1px solid #fff100;
         color: WindowText;
         forced-color-adjust: none;
       }
+      @media screen and (-ms-high-contrast: black-on-white), screen and (forced-colors: active) and (prefers-color-scheme: light){& {
+        border: 1px solid #966400;
+      }
 >
   <div
     className=