botframework-webchat-component 4.14.1 → 4.15.2-main.20220413.af6e8a3

package/src/Styles/StyleSet/KeyboardHelp.ts

@@ -0,0 +1,157 @@
+// Numbers are commonly used in CSS.
+/* eslint-disable no-magic-numbers */
+
+import { StrictStyleOptions } from 'botframework-webchat-api';
+
+export default function createKeyboardHelpStyleSet({ paddingRegular, primaryFont }: StrictStyleOptions) {
+  return {
+    '&.webchat__keyboard-help': {
+      fontFamily: primaryFont,
+      fontSize: 14,
+      height: '100%',
+      margin: paddingRegular,
+      outline: 0,
+
+      '&:not(.webchat__keyboard-help--shown)': {
+        height: 0,
+        margin: 0,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        width: 0
+      },
+
+      '& .webchat__keyboard-help__box': {
+        // From Power BI:
+        // boxShadow: '0 6.4px 14.4px rgb(0 0 0 / 13%), 0 1.2px 3.6px rgb(0 0 0 / 11%)',
+        // From Fluent (depth-16 for teaching callouts):
+        borderRadius: 2,
+        boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12)',
+        boxSizing: 'border-box',
+        height: '100%',
+        padding: paddingRegular * 2,
+        position: 'relative',
+
+        '@media (forced-colors: active)': {
+          boxShadow: 'none',
+          outlineColor: 'white',
+          outlineStyle: 'solid',
+          outlineWidth: 4
+        },
+
+        '@media (forced-colors: none) and (prefers-color-scheme: dark)': {
+          boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.28), 0px 0px 2px rgba(0, 0, 0, 0.24)'
+        }
+      },
+
+      '& .webchat__keyboard-help__close-button': {
+        appearance: 'none',
+        backgroundColor: 'transparent',
+        borderColor: 'black',
+        borderRadius: 4,
+        borderStyle: 'solid',
+        borderWidth: 2,
+        color: '#999',
+        height: 34,
+        padding: 0,
+        position: 'absolute',
+        right: paddingRegular,
+        top: paddingRegular,
+        width: 34,
+
+        '@media (forced-colors: none) and (prefers-color-scheme: light)': {
+          '&:active': {
+            backgroundColor: '#EDEBE9' // neutralLight (gray30)
+          },
+
+          '&:not(:active):hover': {
+            backgroundColor: '#F3F2F1' // neutralLighter (gray20)
+          }
+        },
+
+        '@media (forced-colors: none) and (prefers-color-scheme: dark)': {
+          borderColor: 'white',
+
+          '&:active': {
+            backgroundColor: '#292827' // neutralLight (gray30)
+          },
+
+          '&:not(:active):hover': {
+            backgroundColor: '#252423' // neutralLight (gray30)
+          }
+        }
+      },
+
+      '& .webchat__keyboard-help__close-button_image': {
+        fill: '#323130', // neutralPrimary (gray160)
+        height: 10,
+        width: 10,
+
+        '@media (forced-colors: active)': {
+          fill: 'White'
+        },
+
+        '@media (forced-colors: none) and (prefers-color-scheme: dark)': {
+          fill: '#F3F2F1' // neutralPrimary (gray160)
+        }
+      },
+
+      '& .webchat__keyboard-help__header, & .webchat__keyboard-help__sub-header': {
+        marginBottom: paddingRegular / 2,
+        marginTop: 0
+      },
+
+      '& .webchat__keyboard-help__section': {
+        marginBottom: paddingRegular
+      },
+
+      '& .webchat__keyboard-help__two-panes': {
+        alignItems: 'flex-start',
+        display: 'flex'
+      },
+
+      '& .webchat__keyboard-help__image': {
+        flexShrink: 10000,
+        paddingRight: paddingRegular
+      },
+
+      '& .webchat__keyboard-help__image--dark, & .webchat__keyboard-help__image--high-contrast': {
+        display: 'none'
+      },
+
+      '@media (forced-colors: active)': {
+        '& .webchat__keyboard-help__image--dark, & .webchat__keyboard-help__image--light': {
+          display: 'none'
+        },
+
+        '& .webchat__keyboard-help__image--high-contrast': {
+          display: 'unset'
+        }
+      },
+
+      '@media (forced-colors: none) and (prefers-color-scheme: dark)': {
+        backgroundColor: 'black',
+        color: '#F3F2F1',
+
+        '& .webchat__keyboard-help__image--light': {
+          display: 'none'
+        },
+
+        '& .webchat__keyboard-help__image--dark': {
+          display: 'unset'
+        }
+      },
+
+      '& .webchat__keyboard-help__notes': {
+        marginBottom: paddingRegular
+      },
+
+      '& .webchat__keyboard-help__notes-header': {
+        margin: 0
+      },
+
+      '& .webchat__keyboard-help__notes-text': {
+        margin: 0
+      }
+    }
+  };
+}

package/src/Styles/StyleSet/ScrollToEndButton.ts

@@ -14,7 +14,7 @@ export default function createScrollToEndButtonStyle({
   return {
     '&.webchat__scroll-to-end-button': {
       // TODO: [P3] Can we not to unset borderWidth and outline earlier?
-      '@media screen and (-ms-high-contrast: active)': {
+      '@media screen and (forced-colors: active)': {
         borderWidth: 'initial',
         outline: 'initial'
       },

package/src/Styles/StyleSet/SendBoxButton.ts

@@ -2,47 +2,118 @@ import { StrictStyleOptions } from 'botframework-webchat-api';
 
 export default function createSendBoxButtonStyle({
   sendBoxButtonColor,
+  sendBoxButtonColorOnActive,
   sendBoxButtonColorOnDisabled,
   sendBoxButtonColorOnFocus,
   sendBoxButtonColorOnHover,
+  sendBoxButtonKeyboardFocusIndicatorBorderColor,
+  sendBoxButtonKeyboardFocusIndicatorBorderRadius,
+  sendBoxButtonKeyboardFocusIndicatorBorderStyle,
+  sendBoxButtonKeyboardFocusIndicatorBorderWidth,
+  sendBoxButtonKeyboardFocusIndicatorInset,
+  sendBoxButtonShadeBorderRadius,
+  sendBoxButtonShadeColor,
+  sendBoxButtonShadeColorOnActive,
+  sendBoxButtonShadeColorOnDisabled,
+  sendBoxButtonShadeColorOnFocus,
+  sendBoxButtonShadeColorOnHover,
+  sendBoxButtonShadeInset,
   sendBoxHeight,
   subtle
 }: StrictStyleOptions) {
   return {
     '&.webchat__icon-button': {
       alignItems: 'center',
+      appearance: 'none',
       backgroundColor: 'Transparent',
       border: 0,
       display: 'flex',
+      fill: sendBoxButtonColor || subtle,
       justifyContent: 'center',
       outline: 0,
       padding: 0,
-
-      // We use the sendBoxHeight, so the button looks square
-      width: sendBoxHeight,
+      position: 'relative',
+      width: sendBoxHeight, // We use the sendBoxHeight, so the button looks square
 
       '&:not(.webchat__icon-button--stretch)': {
         height: sendBoxHeight
       },
 
+      // Order of style preferences (based on effort of user gesture): disabled > active > hover > focus.
+      // Keyboard focus indicator styles applied by :focus-visible do not conflict with :active/:hover/:focus, so it is not included here.
+      '&:disabled, &[aria-disabled="true"]': {
+        fill: sendBoxButtonColorOnDisabled,
+
+        '& .webchat__icon-button__shade': {
+          backgroundColor: sendBoxButtonShadeColorOnDisabled
+        }
+      },
+
       '&:not(:disabled):not([aria-disabled="true"])': {
-        '&:focus svg': {
-          fill: sendBoxButtonColorOnFocus
+        '&:active': {
+          fill: sendBoxButtonColorOnActive,
+
+          '& .webchat__icon-button__shade': {
+            backgroundColor: sendBoxButtonShadeColorOnActive
+          }
         },
 
-        '&:hover svg': {
-          fill: sendBoxButtonColorOnHover
+        '&:not(:active)': {
+          '&:hover': {
+            fill: sendBoxButtonColorOnHover,
+
+            '& .webchat__icon-button__shade': {
+              backgroundColor: sendBoxButtonShadeColorOnHover
+            }
+          },
+
+          '&:not(:hover)': {
+            '&:focus': {
+              fill: sendBoxButtonColorOnFocus,
+
+              '& .webchat__icon-button__shade': {
+                backgroundColor: sendBoxButtonShadeColorOnFocus
+              }
+            }
+          }
         }
       },
 
-      '& svg': {
-        fill: sendBoxButtonColor || subtle
+      // On unsupported browser, :focus-visible and :not(:focus-visible) is always false.
+      // And it will turn the whole CSS selector ":unsupported, .truthy" to false.
+      '&:not(:focus-visible) .webchat__icon-button__keyboard-focus-indicator': {
+        display: 'none'
       },
 
-      '&:disabled, &[aria-disabled="true"]': {
-        '& svg': {
-          fill: sendBoxButtonColorOnDisabled
-        }
+      '&:not(.webchat__icon-button--focus-visible) .webchat__icon-button__keyboard-focus-indicator': {
+        display: 'none'
+      },
+
+      // Make sure all contents are in the same stacking context.
+      '& > *': {
+        position: 'relative'
+      },
+
+      '& .webchat__icon-button__shade': {
+        backgroundColor: sendBoxButtonShadeColor,
+        borderRadius: sendBoxButtonShadeBorderRadius,
+        bottom: sendBoxButtonShadeInset,
+        left: sendBoxButtonShadeInset,
+        position: 'absolute',
+        right: sendBoxButtonShadeInset,
+        top: sendBoxButtonShadeInset
+      },
+
+      '& .webchat__icon-button__keyboard-focus-indicator': {
+        borderColor: sendBoxButtonKeyboardFocusIndicatorBorderColor,
+        borderRadius: sendBoxButtonKeyboardFocusIndicatorBorderRadius,
+        borderStyle: sendBoxButtonKeyboardFocusIndicatorBorderStyle,
+        borderWidth: sendBoxButtonKeyboardFocusIndicatorBorderWidth,
+        bottom: sendBoxButtonKeyboardFocusIndicatorInset,
+        left: sendBoxButtonKeyboardFocusIndicatorInset,
+        position: 'absolute',
+        right: sendBoxButtonKeyboardFocusIndicatorInset,
+        top: sendBoxButtonKeyboardFocusIndicatorInset
       }
     }
   };

package/src/Styles/StyleSet/SendBoxTextBox.ts

@@ -3,7 +3,6 @@ import { StrictStyleOptions } from 'botframework-webchat-api';
 export default function createSendBoxTextBoxStyle({
   paddingRegular,
   primaryFont,
-  sendBoxBackground,
   sendBoxDisabledTextColor,
   sendBoxMaxHeight,
   sendBoxPlaceholderColor,
@@ -27,7 +26,7 @@ export default function createSendBoxTextBoxStyle({
       },
 
       '& .webchat__send-box-text-box__input, & .webchat__send-box-text-box__html-text-area': {
-        backgroundColor: sendBoxBackground,
+        backgroundColor: 'transparent', // We set this to transparent because we already applied "sendBoxBackground" to a parent container.
 
         '&:not(:disabled):not([aria-disabled="true"])': {
           color: sendBoxTextColor

package/src/Styles/StyleSet/StackedLayout.ts

@@ -42,9 +42,10 @@ export default function createStackedLayoutStyle({
         width: '100%'
       },
 
-      '&.webchat__stacked-layout--no-message .webchat__stacked-layout__attachment-row.webchat__stacked-layout__attachment-row--first': {
-        marginTop: 0
-      },
+      '&.webchat__stacked-layout--no-message .webchat__stacked-layout__attachment-row.webchat__stacked-layout__attachment-row--first':
+        {
+          marginTop: 0
+        },
 
       '& .webchat__stacked-layout__message': {
         maxWidth: bubbleMaxWidth,
@@ -65,15 +66,16 @@ export default function createStackedLayoutStyle({
         }
       },
 
-      '&.webchat__stacked-layout--hide-avatar, &.webchat__stacked-layout--show-avatar, &.webchat__stacked-layout--hide-nub, &.webchat__stacked-layout--show-nub': {
-        '& .webchat__stacked-layout__attachment, & .webchat__stacked-layout__message': {
-          maxWidth: bubbleMaxWidth + paddingRegular
-        },
+      '&.webchat__stacked-layout--hide-avatar, &.webchat__stacked-layout--show-avatar, &.webchat__stacked-layout--hide-nub, &.webchat__stacked-layout--show-nub':
+        {
+          '& .webchat__stacked-layout__attachment, & .webchat__stacked-layout__message': {
+            maxWidth: bubbleMaxWidth + paddingRegular
+          },
 
-        '& .webchat__stacked-layout__nub-pad': {
-          width: paddingRegular
-        }
-      },
+          '& .webchat__stacked-layout__nub-pad': {
+            width: paddingRegular
+          }
+        },
 
       '&:not(.webchat__stacked-layout--top-callout)': {
         '& .webchat__stacked-layout__avatar-gutter, & .webchat__stacked-layout__content': {

package/src/Styles/StyleSet/SuggestedAction.ts

@@ -7,62 +7,141 @@ export default function createSuggestedActionStyle({
   paddingRegular,
   paddingWide,
   primaryFont,
-  suggestedActionBackground,
+  suggestedActionBorderRadius,
+
+  suggestedActionBackgroundColor,
   suggestedActionBorderColor,
   suggestedActionBorderStyle,
   suggestedActionBorderWidth,
-  suggestedActionBorderRadius,
-  suggestedActionImageHeight,
   suggestedActionTextColor,
-  suggestedActionDisabledBackground,
-  suggestedActionDisabledBorderColor,
-  suggestedActionDisabledBorderStyle,
-  suggestedActionDisabledBorderWidth,
-  suggestedActionDisabledTextColor,
+
+  suggestedActionBackgroundColorOnActive,
+  suggestedActionBorderColorOnActive,
+  suggestedActionBorderStyleOnActive,
+  suggestedActionBorderWidthOnActive,
+  suggestedActionTextColorOnActive,
+
+  suggestedActionBackgroundColorOnDisabled,
+  suggestedActionBorderColorOnDisabled,
+  suggestedActionBorderStyleOnDisabled,
+  suggestedActionBorderWidthOnDisabled,
+  suggestedActionTextColorOnDisabled,
+
+  suggestedActionBackgroundColorOnFocus,
+  suggestedActionBorderColorOnFocus,
+  suggestedActionBorderStyleOnFocus,
+  suggestedActionBorderWidthOnFocus,
+  suggestedActionTextColorOnFocus,
+
+  suggestedActionBackgroundColorOnHover,
+  suggestedActionBorderColorOnHover,
+  suggestedActionBorderStyleOnHover,
+  suggestedActionBorderWidthOnHover,
+  suggestedActionTextColorOnHover,
+
+  suggestedActionKeyboardFocusIndicatorBorderColor,
+  suggestedActionKeyboardFocusIndicatorBorderRadius,
+  suggestedActionKeyboardFocusIndicatorBorderStyle,
+  suggestedActionKeyboardFocusIndicatorBorderWidth,
+  suggestedActionKeyboardFocusIndicatorInset,
+
   suggestedActionHeight,
+  suggestedActionImageHeight,
   suggestedActionsStackedLayoutButtonMaxHeight,
-  subtle
+  subtle,
+
+  // Deprecated
+  suggestedActionActiveBackground,
+  suggestedActionBackground,
+  suggestedActionDisabledBackground,
+  suggestedActionFocusBackground,
+  suggestedActionHoverBackground
 }: StrictStyleOptions) {
   return {
     '&.webchat__suggested-action': {
-      display: 'flex',
+      alignItems: 'center',
+      background: suggestedActionBackground, // Deprecated as of 4.15.0. Remove on or after 2021-09-16.
+      backgroundColor: suggestedActionBackgroundColor,
+      borderColor: suggestedActionBorderColor || accent,
+      borderRadius: suggestedActionBorderRadius,
+      borderStyle: suggestedActionBorderStyle,
+      borderWidth: suggestedActionBorderWidth,
+      color: suggestedActionTextColor || accent,
+      fontFamily: primaryFont,
+      fontSize: 'inherit',
+      height: suggestedActionHeight,
+      justifyContent: 'center',
       maxWidth: '100%',
+      outline: 0,
+      paddingLeft: paddingWide,
+      paddingRight: paddingWide,
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      width: '100%',
+
+      // Order of style preferences (based on effort of user gesture): disabled > active > hover > focus.
+      // Keyboard focus indicator styles applied by :focus-visible do not conflict with :active/:hover/:focus, so it is not included here.
+      '&:disabled, &[aria-disabled="true"]': {
+        background: suggestedActionDisabledBackground,
+        backgroundColor: suggestedActionBackgroundColorOnDisabled,
+        borderColor: suggestedActionBorderColorOnDisabled,
+        borderStyle: suggestedActionBorderStyleOnDisabled,
+        borderWidth: suggestedActionBorderWidthOnDisabled,
+        color: suggestedActionTextColorOnDisabled || subtle
+      },
 
-      '& .webchat__suggested-action__button': {
-        alignItems: 'center',
-        borderRadius: suggestedActionBorderRadius,
-        fontFamily: primaryFont,
-        fontSize: 'inherit',
-        height: suggestedActionHeight,
-        justifyContent: 'center',
-        maxWidth: '100%',
-        paddingLeft: paddingWide,
-        paddingRight: paddingWide,
-        whiteSpace: 'nowrap',
-        width: '100%',
-
-        '&:disabled, &[aria-disabled="true"]': {
-          background: suggestedActionDisabledBackground || suggestedActionBackground,
-          borderColor: suggestedActionDisabledBorderColor,
-          borderStyle: suggestedActionDisabledBorderStyle,
-          borderWidth: suggestedActionDisabledBorderWidth,
-          color: suggestedActionDisabledTextColor || subtle
+      '&:not(:disabled):not([aria-disabled="true"])': {
+        '&:active': {
+          background: suggestedActionActiveBackground,
+          backgroundColor: suggestedActionBackgroundColorOnActive,
+          borderColor: suggestedActionBorderColorOnActive,
+          borderStyle: suggestedActionBorderStyleOnActive,
+          borderWidth: suggestedActionBorderWidthOnActive,
+          color: suggestedActionTextColorOnActive
         },
 
-        '&:not(:disabled):not([aria-disabled="true"])': {
-          background: suggestedActionBackground,
-          borderColor: suggestedActionBorderColor || accent,
-          borderStyle: suggestedActionBorderStyle,
-          borderWidth: suggestedActionBorderWidth,
-          color: suggestedActionTextColor || accent
+        '&:not(:active)': {
+          '&:hover': {
+            background: suggestedActionHoverBackground,
+            backgroundColor: suggestedActionBackgroundColorOnHover,
+            borderColor: suggestedActionBorderColorOnHover,
+            borderStyle: suggestedActionBorderStyleOnHover,
+            borderWidth: suggestedActionBorderWidthOnHover,
+            color: suggestedActionTextColorOnHover
+          },
+
+          '&:not(:hover)': {
+            '&:focus': {
+              background: suggestedActionFocusBackground,
+              backgroundColor: suggestedActionBackgroundColorOnFocus,
+              borderColor: suggestedActionBorderColorOnFocus,
+              borderStyle: suggestedActionBorderStyleOnFocus,
+              borderWidth: suggestedActionBorderWidthOnFocus,
+              color: suggestedActionTextColorOnFocus
+            }
+          }
         }
       },
 
-      '& .webchat__suggested-action__image': {
-        height: suggestedActionImageHeight
+      // On unsupported browser, :focus-visible and :not(:focus-visible) is always false.
+      // And it will turn the whole CSS selector ":unsupported, .truthy" to false.
+      '&:not(:focus-visible) .webchat__suggested-action__keyboard-focus-indicator': {
+        display: 'none'
+      },
+
+      '&:not(.webchat__suggested-action--focus-visible) .webchat__suggested-action__keyboard-focus-indicator': {
+        display: 'none'
+      },
+
+      '&:not(.webchat__suggested-action--rtl) .webchat__suggested-action__image + .webchat__suggested-action__text': {
+        paddingLeft: paddingRegular
+      },
+
+      '&.webchat__suggested-action--rtl .webchat__suggested-action__image + .webchat__suggested-action__text': {
+        paddingRight: paddingRegular
       },
 
-      '& .webchat__suggested-action--wrapping': {
+      '&.webchat__suggested-action--wrapping': {
         height: 'auto',
         maxHeight: suggestedActionsStackedLayoutButtonMaxHeight || '100%',
         minHeight:
@@ -71,12 +150,20 @@ export default function createSuggestedActionStyle({
             : suggestedActionHeight
       },
 
-      '&:not(.webchat__suggested-action--rtl) .webchat__suggested-action__image + .webchat__suggested-action__text': {
-        paddingLeft: paddingRegular
+      '& .webchat__suggested-action__image': {
+        height: suggestedActionImageHeight
       },
 
-      '&.webchat__suggested-action--rtl .webchat__suggested-action__image + .webchat__suggested-action__text': {
-        paddingRight: paddingRegular
+      '& .webchat__suggested-action__keyboard-focus-indicator': {
+        borderColor: suggestedActionKeyboardFocusIndicatorBorderColor,
+        borderRadius: suggestedActionKeyboardFocusIndicatorBorderRadius,
+        borderStyle: suggestedActionKeyboardFocusIndicatorBorderStyle,
+        borderWidth: suggestedActionKeyboardFocusIndicatorBorderWidth,
+        bottom: suggestedActionKeyboardFocusIndicatorInset,
+        left: suggestedActionKeyboardFocusIndicatorInset,
+        position: 'absolute',
+        right: suggestedActionKeyboardFocusIndicatorInset,
+        top: suggestedActionKeyboardFocusIndicatorInset
       }
     }
   };

package/src/Styles/StyleSet/SuggestedActions.ts

@@ -25,7 +25,7 @@ export default function createSuggestedActionsStyle({
           paddingBottom: paddingRegular / 2,
           paddingTop: paddingRegular / 2,
 
-          '& .webchat__suggested-actions__button': {
+          '& .webchat__suggested-actions__item-box': {
             paddingBottom: paddingRegular / 2,
             paddingLeft: paddingRegular / 2,
             paddingRight: paddingRegular / 2,
@@ -113,13 +113,16 @@ export default function createSuggestedActionsStyle({
           paddingTop: paddingRegular / 2
         },
 
-        '& .webchat__suggested-actions__item': {
+        '& .webchat__suggested-actions__flow-item-box': {
           maxWidth: '100%',
           overflow: 'hidden' // This is required in IE11
         },
 
-        '& .webchat__suggested-actions__button': {
-          padding: paddingRegular / 2
+        '& .webchat__suggested-actions__item-box': {
+          paddingBottom: paddingRegular / 2,
+          paddingLeft: paddingRegular / 2,
+          paddingRight: paddingRegular / 2,
+          paddingTop: paddingRegular / 2
         }
       },
 
@@ -133,7 +136,7 @@ export default function createSuggestedActionsStyle({
           paddingTop: paddingRegular / 2
         },
 
-        '& .webchat__suggested-actions__button': {
+        '& .webchat__suggested-actions__item-box': {
           paddingBottom: paddingRegular / 2,
           paddingLeft: paddingRegular / 2,
           paddingRight: paddingRegular / 2,
@@ -152,6 +155,11 @@ export default function createSuggestedActionsStyle({
           display: 'flex',
           whiteSpace: 'normal'
         }
+      },
+
+      '& .webchat__suggested-actions__item-box': {
+        display: 'flex',
+        maxWidth: '100%'
       }
     }
   };

package/src/Styles/createStyleSet.ts

@@ -1,4 +1,3 @@
-/* eslint-disable complexity */
 import { normalizeStyleOptions, StyleOptions } from 'botframework-webchat-api';
 
 import createActivitiesStyle from './StyleSet/Activities';
@@ -18,6 +17,7 @@ import createErrorNotificationStyle from './StyleSet/ErrorNotification';
 import createFileContentStyle from './StyleSet/FileContent';
 import createImageAvatarStyle from './StyleSet/ImageAvatar';
 import createInitialsAvatarStyle from './StyleSet/InitialsAvatar';
+import createKeyboardHelpStyle from './StyleSet/KeyboardHelp';
 import createMicrophoneButtonStyle from './StyleSet/MicrophoneButton';
 import createRootStyle from './StyleSet/Root';
 import createScrollToEndButtonStyle from './StyleSet/ScrollToEndButton';
@@ -67,6 +67,7 @@ export default function createStyleSet(styleOptions: StyleOptions) {
     fileContent: createFileContentStyle(strictStyleOptions),
     imageAvatar: createImageAvatarStyle(strictStyleOptions),
     initialsAvatar: createInitialsAvatarStyle(strictStyleOptions),
+    keyboardHelp: createKeyboardHelpStyle(strictStyleOptions),
     microphoneButton: createMicrophoneButtonStyle(strictStyleOptions),
     options: { ...strictStyleOptions }, // Cloned to make sure no additional modifications will propagate up.
     root: createRootStyle(strictStyleOptions),

package/src/Styles/mirrorStyle.js

@@ -1,3 +1,5 @@
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
+
 export default function mirrorStyle(mirrorSelector, styles) {
   const mirrored = {};
 
@@ -7,8 +9,14 @@ export default function mirrorStyle(mirrorSelector, styles) {
         match === 'Left' ? 'Right' : match === 'left' ? 'right' : match === 'Right' ? 'Left' : 'left'
       );
 
-      mirrored[patchedKey] = value;
-    } else {
+      if (!isForbiddenPropertyName(patchedKey)) {
+        // Mitigated through denylisting.
+        // eslint-disable-next-line security/detect-object-injection
+        mirrored[patchedKey] = value;
+      }
+    } else if (!isForbiddenPropertyName(key)) {
+      // Mitigated through denylisting.
+      // eslint-disable-next-line security/detect-object-injection
       mirrored[key] = mirrorStyle('', value);
     }
   }

package/src/Toast/NotificationIcon.js

@@ -1,4 +1,5 @@
 import { hooks } from 'botframework-webchat-api';
+import { isForbiddenPropertyName } from 'botframework-webchat-core';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -17,7 +18,9 @@ const NotificationIcon = ({ className, level }) => {
     warn: localize('TOAST_ALT_WARN')
   };
 
-  const prefix = prefixes[level] || '';
+  // Mitigated through denylisting.
+  // eslint-disable-next-line security/detect-object-injection
+  const prefix = (!isForbiddenPropertyName(level) && prefixes[level]) || '';
 
   return (
     <React.Fragment>