@microsoft/omnichannel-chat-components 1.1.19 → 1.2.0-main.5692126

package/lib/cjs/components/prechatsurveypane/PreChatSurveyPane.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var AdaptiveCards = _interopRequireWildcard(require("adaptivecards"));
+var AdaptiveCards = _interopRequireWildcard(require("adaptivecards/dist/adaptivecards.js"));
 var _Constants = require("../../common/Constants");
 var _react = require("@fluentui/react");
 var _react2 = _interopRequireWildcard(require("react"));
@@ -15,9 +15,58 @@ var _defaultPreChatSurveyPaneControlProps = require("./common/defaultProps/defau
 var _defaultPreChatSurveyPaneGeneralStyles = require("./common/defaultProps/defaultStyles/defaultPreChatSurveyPaneGeneralStyles");
 var _defaultPreChatSurveyPaneStyles = require("./common/defaultProps/defaultStyles/defaultPreChatSurveyPaneStyles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Detect iOS (iPhone/iPad/iPod) including iPadOS 13+ which reports as Mac with touch support.
+// Used to scope iOS-only Safari workarounds; must not match other platforms.
+const isIOSDevice = () => {
+  if (typeof navigator === "undefined") {
+    return false;
+  }
+  const ua = navigator.userAgent || "";
+  if (/iPad|iPhone|iPod/.test(ua)) {
+    return true;
+  }
+  return ua.includes("Mac") && typeof document !== "undefined" && "ontouchend" in document;
+};
+
+// iOS-only: AdaptiveCards' ChoiceSetInput value getter treats `selectedIndex > 0` as "user selected"
+// and returns undefined for index 0 (assuming it is always the injected placeholder).
+// On iOS we remove the placeholder to avoid a blank picker row, which shifts the first real
+// option to index 0 — so the original getter wrongly reports undefined and required-field
+// validation fails. Patch the prototype once to accept index >= 0.
+let iosChoiceSetValuePatched = false;
+const patchIOSChoiceSetValueGetter = () => {
+  if (iosChoiceSetValuePatched) {
+    return;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const ChoiceSetInput = AdaptiveCards.ChoiceSetInput;
+  if (!ChoiceSetInput || !ChoiceSetInput.prototype) {
+    return;
+  }
+  const descriptor = Object.getOwnPropertyDescriptor(ChoiceSetInput.prototype, "value");
+  if (!descriptor || !descriptor.get) {
+    return;
+  }
+  Object.defineProperty(ChoiceSetInput.prototype, "value", {
+    configurable: true,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    get: function () {
+      var _descriptor$get;
+      if (!this.isMultiSelect && this._selectElement) {
+        return this._selectElement.selectedIndex >= 0 ? this._selectElement.value : undefined;
+      }
+      return (_descriptor$get = descriptor.get) === null || _descriptor$get === void 0 ? void 0 : _descriptor$get.call(this);
+    }
+  });
+  iosChoiceSetValuePatched = true;
+};
 function PreChatSurveyPane(props) {
-  var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$styleProps8, _props$styleProps9, _props$styleProps0, _defaultPreChatSurvey, _props$styleProps1, _defaultPreChatSurvey2, _props$styleProps10, _props$styleProps11, _defaultPreChatSurvey3, _props$styleProps12, _defaultPreChatSurvey4, _props$styleProps13, _props$styleProps14, _defaultPreChatSurvey5, _props$styleProps15, _defaultPreChatSurvey6, _props$styleProps16, _defaultPreChatSurvey7, _props$styleProps17, _defaultPreChatSurvey8, _props$styleProps18, _defaultPreChatSurvey9, _props$styleProps19, _defaultPreChatSurvey0, _props$styleProps20, _defaultPreChatSurvey1, _props$styleProps21, _defaultPreChatSurvey10, _props$controlProps6, _props$controlProps7, _props$controlProps8;
+  var _props$controlProps, _props$styleProps, _props$styleProps2, _props$styleProps3, _props$styleProps4, _props$styleProps5, _props$styleProps6, _props$styleProps7, _props$styleProps8, _props$styleProps9, _defaultPreChatSurvey, _props$styleProps0, _defaultPreChatSurvey2, _props$styleProps1, _defaultPreChatSurvey3, _props$styleProps10, _defaultPreChatSurvey4, _props$styleProps11, _defaultPreChatSurvey5, _props$styleProps12, _defaultPreChatSurvey6, _props$styleProps13, _defaultPreChatSurvey7, _props$styleProps14, _defaultPreChatSurvey8, _props$styleProps15, _defaultPreChatSurvey9, _props$styleProps16, _defaultPreChatSurvey0, _props$styleProps17, _defaultPreChatSurvey1, _props$styleProps18, _defaultPreChatSurvey10, _props$styleProps19, _defaultPreChatSurvey11, _props$styleProps20, _defaultPreChatSurvey12, _props$styleProps21, _defaultPreChatSurvey13, _props$controlProps6, _props$controlProps7, _props$controlProps8;
   const elementId = ((_props$controlProps = props.controlProps) === null || _props$controlProps === void 0 ? void 0 : _props$controlProps.id) ?? _defaultPreChatSurveyPaneControlProps.defaultPreChatSurveyPaneControlProps.id;
+  const isIOS = isIOSDevice();
+  if (isIOS) {
+    patchIOSChoiceSetValueGetter();
+  }
   let adpativeCardPayload;
   let adaptiveCardHostConfig;
   const containerStyles = {
@@ -71,6 +120,31 @@ function PreChatSurveyPane(props) {
   // Render the card
   const renderedCard = adaptiveCard.render();
   (0, _utils.addNoreferrerNoopenerTag)(renderedCard);
+
+  // Fix iOS Safari blank space in <select> dropdowns. iOS-only; other platforms render correctly.
+  // The placeholder option that AdaptiveCards injects renders as a blank row in the iOS
+  // native picker (CSS display/hidden are ignored on <option>). Removing it from the DOM
+  // is the only reliable workaround. After removal, we select the first remaining option
+  // and notify AdaptiveCards so required-field validation reads the visible value.
+  const applyIOSPrechatFix = container => {
+    const selectElements = container.querySelectorAll("select.ac-choiceSetInput-compact");
+    selectElements.forEach(select => {
+      const firstOption = select.options[0];
+      if (firstOption && firstOption.disabled && firstOption.hidden && firstOption.value === "") {
+        firstOption.remove();
+        if (select.options.length > 0) {
+          select.selectedIndex = 0;
+          select.value = select.options[0].value;
+          select.dispatchEvent(new Event("input", {
+            bubbles: true
+          }));
+          select.dispatchEvent(new Event("change", {
+            bubbles: true
+          }));
+        }
+      }
+    });
+  };
   return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement("style", null, `
             .ac-textBlock {
                 font-size: ${(_props$styleProps3 = props.styleProps) === null || _props$styleProps3 === void 0 || (_props$styleProps3 = _props$styleProps3.customTextStyleProps) === null || _props$styleProps3 === void 0 ? void 0 : _props$styleProps3.fontSize} !important;
@@ -88,39 +162,39 @@ function PreChatSurveyPane(props) {
                 margin-bottom: 6px;
             }
             .ac-input.ac-textInput {
-                font-size: ${(_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 || (_props$styleProps9 = _props$styleProps9.customTextInputStyleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.fontSize};
-                font-family: ${((_props$styleProps0 = props.styleProps) === null || _props$styleProps0 === void 0 || (_props$styleProps0 = _props$styleProps0.customTextInputStyleProps) === null || _props$styleProps0 === void 0 ? void 0 : _props$styleProps0.fontFamily) ?? ((_defaultPreChatSurvey = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customTextInputStyleProps) === null || _defaultPreChatSurvey === void 0 ? void 0 : _defaultPreChatSurvey.fontFamily)};
-                height: ${((_props$styleProps1 = props.styleProps) === null || _props$styleProps1 === void 0 || (_props$styleProps1 = _props$styleProps1.customTextInputStyleProps) === null || _props$styleProps1 === void 0 ? void 0 : _props$styleProps1.height) ?? ((_defaultPreChatSurvey2 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customTextInputStyleProps) === null || _defaultPreChatSurvey2 === void 0 ? void 0 : _defaultPreChatSurvey2.height)};
+                font-size: ${((_props$styleProps9 = props.styleProps) === null || _props$styleProps9 === void 0 || (_props$styleProps9 = _props$styleProps9.customTextInputStyleProps) === null || _props$styleProps9 === void 0 ? void 0 : _props$styleProps9.fontSize) ?? ((_defaultPreChatSurvey = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customTextInputStyleProps) === null || _defaultPreChatSurvey === void 0 ? void 0 : _defaultPreChatSurvey.fontSize)};
+                font-family: ${((_props$styleProps0 = props.styleProps) === null || _props$styleProps0 === void 0 || (_props$styleProps0 = _props$styleProps0.customTextInputStyleProps) === null || _props$styleProps0 === void 0 ? void 0 : _props$styleProps0.fontFamily) ?? ((_defaultPreChatSurvey2 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customTextInputStyleProps) === null || _defaultPreChatSurvey2 === void 0 ? void 0 : _defaultPreChatSurvey2.fontFamily)};
+                height: ${((_props$styleProps1 = props.styleProps) === null || _props$styleProps1 === void 0 || (_props$styleProps1 = _props$styleProps1.customTextInputStyleProps) === null || _props$styleProps1 === void 0 ? void 0 : _props$styleProps1.height) ?? ((_defaultPreChatSurvey3 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customTextInputStyleProps) === null || _defaultPreChatSurvey3 === void 0 ? void 0 : _defaultPreChatSurvey3.height)};
                 padding: 8px;
             }
             .ac-input.ac-textInput.ac-multiline {
-                font-size: ${(_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 || (_props$styleProps10 = _props$styleProps10.customMultilineTextInputStyleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.fontSize};
-                font-family: ${((_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 || (_props$styleProps11 = _props$styleProps11.customMultilineTextInputStyleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.fontFamily) ?? ((_defaultPreChatSurvey3 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customMultilineTextInputStyleProps) === null || _defaultPreChatSurvey3 === void 0 ? void 0 : _defaultPreChatSurvey3.fontFamily)};
-                height: ${((_props$styleProps12 = props.styleProps) === null || _props$styleProps12 === void 0 || (_props$styleProps12 = _props$styleProps12.customMultilineTextInputStyleProps) === null || _props$styleProps12 === void 0 ? void 0 : _props$styleProps12.height) ?? ((_defaultPreChatSurvey4 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customMultilineTextInputStyleProps) === null || _defaultPreChatSurvey4 === void 0 ? void 0 : _defaultPreChatSurvey4.height)};
+                font-size: ${((_props$styleProps10 = props.styleProps) === null || _props$styleProps10 === void 0 || (_props$styleProps10 = _props$styleProps10.customMultilineTextInputStyleProps) === null || _props$styleProps10 === void 0 ? void 0 : _props$styleProps10.fontSize) ?? ((_defaultPreChatSurvey4 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customMultilineTextInputStyleProps) === null || _defaultPreChatSurvey4 === void 0 ? void 0 : _defaultPreChatSurvey4.fontSize)};
+                font-family: ${((_props$styleProps11 = props.styleProps) === null || _props$styleProps11 === void 0 || (_props$styleProps11 = _props$styleProps11.customMultilineTextInputStyleProps) === null || _props$styleProps11 === void 0 ? void 0 : _props$styleProps11.fontFamily) ?? ((_defaultPreChatSurvey5 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customMultilineTextInputStyleProps) === null || _defaultPreChatSurvey5 === void 0 ? void 0 : _defaultPreChatSurvey5.fontFamily)};
+                height: ${((_props$styleProps12 = props.styleProps) === null || _props$styleProps12 === void 0 || (_props$styleProps12 = _props$styleProps12.customMultilineTextInputStyleProps) === null || _props$styleProps12 === void 0 ? void 0 : _props$styleProps12.height) ?? ((_defaultPreChatSurvey6 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customMultilineTextInputStyleProps) === null || _defaultPreChatSurvey6 === void 0 ? void 0 : _defaultPreChatSurvey6.height)};
                 resize: none;
             }
             .ac-input.ac-multichoiceInput {
-                font-size: ${(_props$styleProps13 = props.styleProps) === null || _props$styleProps13 === void 0 || (_props$styleProps13 = _props$styleProps13.customMultichoiceInputStyleProps) === null || _props$styleProps13 === void 0 ? void 0 : _props$styleProps13.fontSize};
-                font-family: ${((_props$styleProps14 = props.styleProps) === null || _props$styleProps14 === void 0 || (_props$styleProps14 = _props$styleProps14.customMultichoiceInputStyleProps) === null || _props$styleProps14 === void 0 ? void 0 : _props$styleProps14.fontFamily) ?? ((_defaultPreChatSurvey5 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customMultichoiceInputStyleProps) === null || _defaultPreChatSurvey5 === void 0 ? void 0 : _defaultPreChatSurvey5.fontFamily)};
+                font-size: ${((_props$styleProps13 = props.styleProps) === null || _props$styleProps13 === void 0 || (_props$styleProps13 = _props$styleProps13.customMultichoiceInputStyleProps) === null || _props$styleProps13 === void 0 ? void 0 : _props$styleProps13.fontSize) ?? ((_defaultPreChatSurvey7 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customMultichoiceInputStyleProps) === null || _defaultPreChatSurvey7 === void 0 ? void 0 : _defaultPreChatSurvey7.fontSize)};
+                font-family: ${((_props$styleProps14 = props.styleProps) === null || _props$styleProps14 === void 0 || (_props$styleProps14 = _props$styleProps14.customMultichoiceInputStyleProps) === null || _props$styleProps14 === void 0 ? void 0 : _props$styleProps14.fontFamily) ?? ((_defaultPreChatSurvey8 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customMultichoiceInputStyleProps) === null || _defaultPreChatSurvey8 === void 0 ? void 0 : _defaultPreChatSurvey8.fontFamily)};
                 padding: 3px;
                 padding-top: 7px;
                 padding-bottom: 7px;
             }
             .ac-input.ac-toggleInput {
-                align-items: ${((_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 || (_props$styleProps15 = _props$styleProps15.customToggleInputStyleProps) === null || _props$styleProps15 === void 0 ? void 0 : _props$styleProps15.alignItems) ?? ((_defaultPreChatSurvey6 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customToggleInputStyleProps) === null || _defaultPreChatSurvey6 === void 0 ? void 0 : _defaultPreChatSurvey6.alignItems)} !important;
+                align-items: ${((_props$styleProps15 = props.styleProps) === null || _props$styleProps15 === void 0 || (_props$styleProps15 = _props$styleProps15.customToggleInputStyleProps) === null || _props$styleProps15 === void 0 ? void 0 : _props$styleProps15.alignItems) ?? ((_defaultPreChatSurvey9 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customToggleInputStyleProps) === null || _defaultPreChatSurvey9 === void 0 ? void 0 : _defaultPreChatSurvey9.alignItems)} !important;
             }
             .ac-pushButton {
                 border: 1px solid #00000000;
                 margin: 2px;
-                height: ${((_props$styleProps16 = props.styleProps) === null || _props$styleProps16 === void 0 || (_props$styleProps16 = _props$styleProps16.customButtonStyleProps) === null || _props$styleProps16 === void 0 ? void 0 : _props$styleProps16.height) ?? ((_defaultPreChatSurvey7 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey7 === void 0 ? void 0 : _defaultPreChatSurvey7.height)};
-                width: ${((_props$styleProps17 = props.styleProps) === null || _props$styleProps17 === void 0 || (_props$styleProps17 = _props$styleProps17.customButtonStyleProps) === null || _props$styleProps17 === void 0 ? void 0 : _props$styleProps17.width) ?? ((_defaultPreChatSurvey8 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey8 === void 0 ? void 0 : _defaultPreChatSurvey8.width)};
+                height: ${((_props$styleProps16 = props.styleProps) === null || _props$styleProps16 === void 0 || (_props$styleProps16 = _props$styleProps16.customButtonStyleProps) === null || _props$styleProps16 === void 0 ? void 0 : _props$styleProps16.height) ?? ((_defaultPreChatSurvey0 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey0 === void 0 ? void 0 : _defaultPreChatSurvey0.height)};
+                width: ${((_props$styleProps17 = props.styleProps) === null || _props$styleProps17 === void 0 || (_props$styleProps17 = _props$styleProps17.customButtonStyleProps) === null || _props$styleProps17 === void 0 ? void 0 : _props$styleProps17.width) ?? ((_defaultPreChatSurvey1 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey1 === void 0 ? void 0 : _defaultPreChatSurvey1.width)};
                 border-radius: 5px;
                 cursor: pointer;
                 font-weight: bold;
-                font-size: ${((_props$styleProps18 = props.styleProps) === null || _props$styleProps18 === void 0 || (_props$styleProps18 = _props$styleProps18.customButtonStyleProps) === null || _props$styleProps18 === void 0 ? void 0 : _props$styleProps18.fontSize) ?? ((_defaultPreChatSurvey9 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey9 === void 0 ? void 0 : _defaultPreChatSurvey9.fontSize)};
-                font-family: ${((_props$styleProps19 = props.styleProps) === null || _props$styleProps19 === void 0 || (_props$styleProps19 = _props$styleProps19.customButtonStyleProps) === null || _props$styleProps19 === void 0 ? void 0 : _props$styleProps19.fontFamily) ?? ((_defaultPreChatSurvey0 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey0 === void 0 ? void 0 : _defaultPreChatSurvey0.fontFamily)};
-                color: ${((_props$styleProps20 = props.styleProps) === null || _props$styleProps20 === void 0 || (_props$styleProps20 = _props$styleProps20.customButtonStyleProps) === null || _props$styleProps20 === void 0 ? void 0 : _props$styleProps20.color) ?? ((_defaultPreChatSurvey1 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey1 === void 0 ? void 0 : _defaultPreChatSurvey1.color)};
-                background-color: ${((_props$styleProps21 = props.styleProps) === null || _props$styleProps21 === void 0 || (_props$styleProps21 = _props$styleProps21.customButtonStyleProps) === null || _props$styleProps21 === void 0 ? void 0 : _props$styleProps21.backgroundColor) ?? ((_defaultPreChatSurvey10 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey10 === void 0 ? void 0 : _defaultPreChatSurvey10.backgroundColor)};
+                font-size: ${((_props$styleProps18 = props.styleProps) === null || _props$styleProps18 === void 0 || (_props$styleProps18 = _props$styleProps18.customButtonStyleProps) === null || _props$styleProps18 === void 0 ? void 0 : _props$styleProps18.fontSize) ?? ((_defaultPreChatSurvey10 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey10 === void 0 ? void 0 : _defaultPreChatSurvey10.fontSize)};
+                font-family: ${((_props$styleProps19 = props.styleProps) === null || _props$styleProps19 === void 0 || (_props$styleProps19 = _props$styleProps19.customButtonStyleProps) === null || _props$styleProps19 === void 0 ? void 0 : _props$styleProps19.fontFamily) ?? ((_defaultPreChatSurvey11 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey11 === void 0 ? void 0 : _defaultPreChatSurvey11.fontFamily)};
+                color: ${((_props$styleProps20 = props.styleProps) === null || _props$styleProps20 === void 0 || (_props$styleProps20 = _props$styleProps20.customButtonStyleProps) === null || _props$styleProps20 === void 0 ? void 0 : _props$styleProps20.color) ?? ((_defaultPreChatSurvey12 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey12 === void 0 ? void 0 : _defaultPreChatSurvey12.color)};
+                background-color: ${((_props$styleProps21 = props.styleProps) === null || _props$styleProps21 === void 0 || (_props$styleProps21 = _props$styleProps21.customButtonStyleProps) === null || _props$styleProps21 === void 0 ? void 0 : _props$styleProps21.backgroundColor) ?? ((_defaultPreChatSurvey13 = _defaultPreChatSurveyPaneStyles.defaultPreChatSurveyPaneStyles.customButtonStyleProps) === null || _defaultPreChatSurvey13 === void 0 ? void 0 : _defaultPreChatSurvey13.backgroundColor)};
             }`), !((_props$controlProps6 = props.controlProps) !== null && _props$controlProps6 !== void 0 && _props$controlProps6.hidePreChatSurveyPane) && /*#__PURE__*/_react2.default.createElement(_react.Stack, {
     id: elementId,
     tabIndex: -1,
@@ -135,6 +209,9 @@ function PreChatSurveyPane(props) {
       // Returns React element
       renderedCard && n && n.appendChild(renderedCard);
       n && n.childElementCount > 1 && n.lastChild && n.removeChild(n.lastChild); // Removes duplicates fix
+      if (isIOS && n) {
+        applyIOSPrechatFix(n);
+      }
     }
   }))));
 }

package/lib/cjs/components/prechatsurveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneMultichoiceInputStyles.js

@@ -5,5 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultPreChatSurveyPaneMultichoiceInputStyles = void 0;
 const defaultPreChatSurveyPaneMultichoiceInputStyles = exports.defaultPreChatSurveyPaneMultichoiceInputStyles = {
+  fontSize: "16px",
   fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
 };

package/lib/cjs/components/prechatsurveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneMultilineTextInputStyles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultPreChatSurveyPaneMultilineTextInputStyles = void 0;
 const defaultPreChatSurveyPaneMultilineTextInputStyles = exports.defaultPreChatSurveyPaneMultilineTextInputStyles = {
+  fontSize: "16px",
   height: "52px",
   fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
 };

package/lib/cjs/components/prechatsurveypane/common/defaultProps/defaultStyles/defaultPreChatSurveyPaneTextInputStyles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultPreChatSurveyPaneTextInputStyles = void 0;
 const defaultPreChatSurveyPaneTextInputStyles = exports.defaultPreChatSurveyPaneTextInputStyles = {
+  fontSize: "16px",
   height: "20px",
   fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
 };

package/lib/cjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/lib/cjs/services/EventQueue.js

@@ -4,15 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 class EventQueue {
   constructor(newMessage) {
-    _defineProperty(this, "queueing", false);
-    _defineProperty(this, "channelEventQueue", void 0);
-    _defineProperty(this, "queueingId", void 0);
-    _defineProperty(this, "newMessage", void 0);
+    this.queueing = false;
+    this.channelEventQueue = void 0;
+    this.queueingId = void 0;
+    this.newMessage = void 0;
     this.channelEventQueue = new Map();
     this.newMessage = newMessage;
   }

package/lib/esm/common/Constants.js

@@ -44,6 +44,6 @@ export let ElementType = /*#__PURE__*/function (ElementType) {
 export const Ids = (_Class3 = class Ids {}, _defineProperty(_Class3, "DefaultCallingContainerId", "lcw-calling-container"), _defineProperty(_Class3, "DefaultCurrentCallId", "lcw-current-call-container"), _defineProperty(_Class3, "CurrentCallActionGroupId", "lcw-current-call-action-icons"), _defineProperty(_Class3, "CurrentCallFooterId", "lcw-current-call-footer"), _defineProperty(_Class3, "RemoteVideoTileId", "lcw-remote-video"), _defineProperty(_Class3, "SelfVideoTileId", "lcw-self-video"), _defineProperty(_Class3, "VideoTileGroupId", "lcw-current-call-body"), _defineProperty(_Class3, "EndCallButtonId", "lcw-call-reject-button"), _defineProperty(_Class3, "MicButtonId", "lcw-toggle-audio"), _defineProperty(_Class3, "VideoButtonId", "lcw-toggle-video"), _defineProperty(_Class3, "CallTimerId", "lcw-current-call-timer"), _defineProperty(_Class3, "CurrentCallLeftGroupId", "lcw-current-call-left-group"), _defineProperty(_Class3, "CurrentCallMiddleGroupId", "lcw-current-call-middle-group"), _defineProperty(_Class3, "CurrentCallRightGroupId", "lcw-current-call-right-group"), _defineProperty(_Class3, "DefaultIncomingCallId", "lcw-incoming-call"), _defineProperty(_Class3, "DeclineCallButtonId", "lcw-call-reject-button"), _defineProperty(_Class3, "AudioCallButtonId", "lcw-call-accept-button"), _defineProperty(_Class3, "VideoCallButtonId", "lcw-video-call-accept-button"), _defineProperty(_Class3, "IncomingCallTitleId", "lcw-incoming-call-message"), _defineProperty(_Class3, "DefaultIncomingCallPopupId", "lcw-incoming-call-popup"), _defineProperty(_Class3, "IncomingCallLeftGroupId", "lcw-incoming-call-left-group"), _defineProperty(_Class3, "IncomingCallMiddleGroupId", "lcw-incoming-call-middle-group"), _defineProperty(_Class3, "IncomingCallRightGroupId", "lcw-incoming-call-right-group"), _defineProperty(_Class3, "DefaultChatButtonId", "lcw-components-chat-button"), _defineProperty(_Class3, "DefaultConfirmationPaneId", "lcw-components-confirmation-pane"), _defineProperty(_Class3, "CustomFooterId", "lcw-footer"), _defineProperty(_Class3, "DownloadTranscriptButtonId", "lcw-footer-download-transcript-button"), _defineProperty(_Class3, "EmailTranscriptButtonId", "lcw-footer-email-transcript-button"), _defineProperty(_Class3, "AudioNotificationButtonId", "lcw-footer-audio-notification-button"), _defineProperty(_Class3, "DefaultFooterId", "lcw-components-footer"), _defineProperty(_Class3, "FooterLeftGroupId", "lcw-footer-left-group"), _defineProperty(_Class3, "FooterMiddleGroupId", "lcw-footer-middle-group"), _defineProperty(_Class3, "FooterRightGroupId", "lcw-footer-right-group"), _defineProperty(_Class3, "DefaultHeaderId", "lcw-header"), _defineProperty(_Class3, "MinimizeButtonId", "lcw-header-minimize-button"), _defineProperty(_Class3, "CloseButtonId", "lcw-header-close-button"), _defineProperty(_Class3, "HeaderIconId", "lcw-header-icon"), _defineProperty(_Class3, "HeaderTitleId", "lcw-header-title"), _defineProperty(_Class3, "HeaderLeftGroupId", "lcw-header-left-group"), _defineProperty(_Class3, "HeaderMiddleGroupId", "lcw-header-middle-group"), _defineProperty(_Class3, "HeaderRightGroupId", "lcw-header-right-group"), _defineProperty(_Class3, "DefaultInputValidationPaneId", "lcw-email-transcript-dialog-container"), _defineProperty(_Class3, "DefaultInputValidationPaneInputId", "lcw-email-transcript-dialog-text-field"), _defineProperty(_Class3, "DefaultLoadingPaneId", "lcw-loading-pane"), _defineProperty(_Class3, "DefaultNotificationPaneId", "lcw-notification-pane"), _defineProperty(_Class3, "DefaultOOOHPaneId", "lcw-out-of-office-hours-pane"), _defineProperty(_Class3, "DefaultPostChatSurveyPaneId", "lcw-postchat-survey-pane"), _defineProperty(_Class3, "DefaultPreChatSurveyPaneId", "lcw-prechat-survey-pane-default"), _defineProperty(_Class3, "DefaultProactiveChatPaneId", "lcw-proactive-chat"), _defineProperty(_Class3, "DefaultReconnectChatPaneId", "lcw-reconnect-chat-pane"), _Class3);
 export const ButtonTypes = (_Class4 = class ButtonTypes {}, _defineProperty(_Class4, "Icon", "icon"), _defineProperty(_Class4, "Text", "text"), _Class4);
 export const IconNames = (_Class5 = class IconNames {}, _defineProperty(_Class5, "DeclineCall", "DeclineCall"), _defineProperty(_Class5, "Microphone", "Microphone"), _defineProperty(_Class5, "MicOff2", "MicOff2"), _defineProperty(_Class5, "Video", "Video"), _defineProperty(_Class5, "VideoOff", "VideoOff"), _defineProperty(_Class5, "IncomingCall", "IncomingCall"), _defineProperty(_Class5, "ChromeClose", "ChromeClose"), _defineProperty(_Class5, "Download", "Download"), _defineProperty(_Class5, "Mail", "Mail"), _defineProperty(_Class5, "Volume3", "Volume3"), _defineProperty(_Class5, "Volume0", "Volume0"), _defineProperty(_Class5, "ChromeMinimize", "ChromeMinimize"), _Class5);
-export const AriaLabels = (_Class6 = class AriaLabels {}, _defineProperty(_Class6, "EndCall", "End Call"), _defineProperty(_Class6, "MicMute", "Mute"), _defineProperty(_Class6, "MicUnmute", "Unmute"), _defineProperty(_Class6, "VideoTurnCameraOn", "Turn camera on"), _defineProperty(_Class6, "VideoTurnCameraOff", "Turn camera off"), _defineProperty(_Class6, "IncomingCallArea", "Incoming call area"), _defineProperty(_Class6, "RejectCall", "Reject call"), _defineProperty(_Class6, "AcceptVoiceCall", "Accept voice call"), _defineProperty(_Class6, "AcceptVideoCall", "Accept video Call"), _defineProperty(_Class6, "DeclineCall", "Decline Call"), _defineProperty(_Class6, "AudioCall", "Audio Call"), _defineProperty(_Class6, "VideoCall", "Video Call"), _defineProperty(_Class6, "LetsChatWeAreOnline", "Let's chat we are online"), _defineProperty(_Class6, "UnreadMessageString", "you have new messages"), _defineProperty(_Class6, "Close", "Close"), _defineProperty(_Class6, "ConfirmationPaneConfirm", "Close Chat"), _defineProperty(_Class6, "ConfirmationPaneCancel", "Cancel. Return to Chat"), _defineProperty(_Class6, "DownloadChatTranscript", "Download chat transcript"), _defineProperty(_Class6, "EmailTranscript", "Email Transcript"), _defineProperty(_Class6, "TurnSoundOff", "Turn sound off"), _defineProperty(_Class6, "TurnSoundOn", "Turn sound on"), _defineProperty(_Class6, "Minimize", "Minimize"), _defineProperty(_Class6, "EmailChatTranscriptPane", "Email Chat Transcript Pane"), _defineProperty(_Class6, "InputValidationPaneInput", "Please provide e-mail address to send transcript. The transcript will be sent after the chat ends. Email address text area"), _defineProperty(_Class6, "Save", "Save"), _defineProperty(_Class6, "Cancel", "Cancel"), _defineProperty(_Class6, "ProactiveChatPane", "Proactive Chat Pane"), _defineProperty(_Class6, "ChatNow", "Chat Now"), _defineProperty(_Class6, "ReconnectChatPane", "Reconnect Chat Pane"), _defineProperty(_Class6, "ReconnectChatPaneIcon", "Reconnect Chat Pane Icon"), _defineProperty(_Class6, "ContinueConversation", "Continue conversation"), _defineProperty(_Class6, "StartNewConversation", "Start new conversation"), _Class6);
+export const AriaLabels = (_Class6 = class AriaLabels {}, _defineProperty(_Class6, "EndCall", "End Call"), _defineProperty(_Class6, "MicMute", "Mute"), _defineProperty(_Class6, "MicUnmute", "Unmute"), _defineProperty(_Class6, "VideoTurnCameraOn", "Turn camera on"), _defineProperty(_Class6, "VideoTurnCameraOff", "Turn camera off"), _defineProperty(_Class6, "IncomingCallArea", "Incoming call area"), _defineProperty(_Class6, "RejectCall", "Reject call"), _defineProperty(_Class6, "AcceptVoiceCall", "Accept voice call"), _defineProperty(_Class6, "AcceptVideoCall", "Accept video Call"), _defineProperty(_Class6, "DeclineCall", "Decline Call"), _defineProperty(_Class6, "AudioCall", "Audio Call"), _defineProperty(_Class6, "VideoCall", "Video Call"), _defineProperty(_Class6, "LetsChatWeAreOnline", "Let's chat we are online"), _defineProperty(_Class6, "UnreadMessageString", "you have new messages"), _defineProperty(_Class6, "Close", "Close"), _defineProperty(_Class6, "ConfirmationPaneConfirm", "Close Chat"), _defineProperty(_Class6, "ConfirmationPaneCancel", "Cancel. Return to Chat"), _defineProperty(_Class6, "DownloadChatTranscript", "Download chat transcript"), _defineProperty(_Class6, "EmailTranscript", "Email Transcript"), _defineProperty(_Class6, "TurnSoundOff", "Turn sound off"), _defineProperty(_Class6, "TurnSoundOn", "Turn sound on"), _defineProperty(_Class6, "Minimize", "Minimize"), _defineProperty(_Class6, "EmailChatTranscriptPane", "Email Chat Transcript Pane"), _defineProperty(_Class6, "InputValidationPaneInput", "Please provide e-mail address to send transcript. The transcript will be sent after the chat ends. Email address text area"), _defineProperty(_Class6, "Save", "Save"), _defineProperty(_Class6, "Cancel", "Cancel"), _defineProperty(_Class6, "ProactiveChatPane", "Proactive Chat Pane"), _defineProperty(_Class6, "ChatNow", "Chat Now"), _defineProperty(_Class6, "ReconnectChatPane", "Reconnect Chat Pane"), _defineProperty(_Class6, "ReconnectChatPaneIcon", "Reconnect Chat Pane Icon"), _defineProperty(_Class6, "ContinueConversation", "Continue conversation"), _defineProperty(_Class6, "StartNewConversation", "Start new conversation"), _defineProperty(_Class6, "InputValidationPaneButtonGroup", "Actions"), _defineProperty(_Class6, "ConfirmationPaneButtonGroup", "Actions"), _Class6);
 export const EventNames = (_Class7 = class EventNames {}, _defineProperty(_Class7, "OnClick", "OnClick"), _defineProperty(_Class7, "OnEscapeKeyDown", "OnEscapeKeyDown"), _defineProperty(_Class7, "IncomingCallEnded", "IncomingCallEnded"), _Class7);
 export const Texts = (_Class8 = class Texts {}, _defineProperty(_Class8, "IncomingCallTitle", "Incoming Call"), _defineProperty(_Class8, "ChatButtonTitle", "Let's Chat!"), _defineProperty(_Class8, "ChatButtonSubtitle", "We're online."), _defineProperty(_Class8, "ChatButtonUnreadMessageString", "new messages"), _defineProperty(_Class8, "ChatButtonLargeUnreadMessageString", "99+"), _defineProperty(_Class8, "CloseButtonText", "Close"), _defineProperty(_Class8, "ConfirmationPaneTitle", "Close chat"), _defineProperty(_Class8, "ConfirmationPaneSubtitle", "Do you really want to close this chat?"), _defineProperty(_Class8, "ConfirmButtonText", "Close"), _defineProperty(_Class8, "EmailPlaceHolderText", "johnsmith@outlook.com"), _defineProperty(_Class8, "CancelButtonText", "Cancel"), _defineProperty(_Class8, "DownloadChatTranscriptText", "Download chat transcript"), _defineProperty(_Class8, "EmailTranscriptText", "Email Transcript"), _defineProperty(_Class8, "HeaderIcon", "Chat Icon"), _defineProperty(_Class8, "HeaderTitle", "Let's Chat"), _defineProperty(_Class8, "MinimizeText", "Minimize"), _defineProperty(_Class8, "InputValidationPaneTitleText", "Please provide e-mail address to send transcript."), _defineProperty(_Class8, "InputValidationPaneSubtitleText", "The transcript will be sent after the chat ends."), _defineProperty(_Class8, "InvalidInputErrorMessageText", "Enter a valid email address."), _defineProperty(_Class8, "SendButtonText", "Send"), _defineProperty(_Class8, "SaveButtonText", "Save"), _defineProperty(_Class8, "LoadingPaneTitleText", "Welcome to"), _defineProperty(_Class8, "LoadingPaneSubtitleText", "live chat support ..."), _defineProperty(_Class8, "LoadingPaneSpinnerText", "Loading ..."), _defineProperty(_Class8, "OOOHPaneTitleText", "Thanks for contacting us. You have reached us outside of our operating hours. An agent will respond when we open."), _defineProperty(_Class8, "PostChatSurveyPaneTitleText", "Post chat survey pane"), _defineProperty(_Class8, "ProactiveChatPaneTitleText", "Welcome to"), _defineProperty(_Class8, "ProactiveChatPaneSubtitleText", "Live chat support!"), _defineProperty(_Class8, "ProactiveChatPaneBodyTitleText", "Hi! Have any questions? I am here to help."), _defineProperty(_Class8, "ProactiveChatPaneStartButtonText", "Chat Now"), _defineProperty(_Class8, "ReconnectChatPaneTitleText", "Previous session detected"), _defineProperty(_Class8, "ReconnectChatPaneSubtitleText", "We have detected a previous chat session. Would you like to continue with your previous session?"), _defineProperty(_Class8, "ReconnectChatPaneContinueChatButtonText", "Continue conversation"), _defineProperty(_Class8, "ReconnectChatPaneStartNewChatButtonText", "Start new conversation"), _Class8);

package/lib/esm/components/callingcontainer/subcomponents/CurrentCall/CurrentCall.js

@@ -1,4 +1,10 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import * as React from "react";
 import { IconButton, Stack } from "@fluentui/react";
 import { BroadcastService } from "../../../../services/BroadcastService";
@@ -95,9 +101,10 @@ function CurrentCall(props) {
       }
     }
   };
-  const [micState, {
-    toggle: setMicState
-  }] = useBoolean(false);
+  const _useBoolean = useBoolean(false),
+    _useBoolean2 = _slicedToArray(_useBoolean, 2),
+    micState = _useBoolean2[0],
+    setMicState = _useBoolean2[1].toggle;
   const endCallButtonProps = Object.assign({}, (_defaultCurrentCallPr31 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr31 === void 0 ? void 0 : _defaultCurrentCallPr31.endCallButtonProps, (_props$controlProps35 = props.controlProps) === null || _props$controlProps35 === void 0 ? void 0 : _props$controlProps35.endCallButtonProps);
   const callTimerProps = Object.assign({}, (_defaultCurrentCallPr32 = defaultCurrentCallProps.controlProps) === null || _defaultCurrentCallPr32 === void 0 ? void 0 : _defaultCurrentCallPr32.callTimerProps, (_props$controlProps36 = props.controlProps) === null || _props$controlProps36 === void 0 ? void 0 : _props$controlProps36.callTimerProps);
   const endCallButtonStyles = Object.assign({}, (_defaultCurrentCallPr33 = defaultCurrentCallProps.styleProps) === null || _defaultCurrentCallPr33 === void 0 ? void 0 : _defaultCurrentCallPr33.endCallButtonStyleProps, (_props$styleProps2 = props.styleProps) === null || _props$styleProps2 === void 0 ? void 0 : _props$styleProps2.endCallButtonStyleProps);

package/lib/esm/components/callingcontainer/subcomponents/Timer/Timer.js

@@ -1,8 +1,17 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import { Label } from "@fluentui/react";
 import React, { useEffect, useState } from "react";
 import { getHours, getMinutes, getSeconds } from "../../../../common/utils";
 function Timer(props) {
-  const [time, setTime] = useState(0);
+  const _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    time = _useState2[0],
+    setTime = _useState2[1];
   const running = true;
   const timerStyles = {
     root: props.timerStyles

package/lib/esm/components/chatbutton/ChatButton.blankAnnouncements.a11y.spec.js

@@ -0,0 +1,155 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import "@testing-library/jest-dom/extend-expect";
+import { cleanup, render } from "@testing-library/react";
+import { BroadcastServiceInitialize } from "../../services/BroadcastService";
+import ChatButton from "./ChatButton";
+import LoadingPane from "../loadingpane/LoadingPane";
+import React from "react";
+import { defaultChatButtonProps } from "./common/defaultProps/defaultChatButtonProps";
+import { defaultLoadingPaneProps } from "../loadingpane/common/defaultProps/defaultLoadingPaneProps";
+
+/**
+ * Repro / catcher for internal tracking — screen reader announces hidden / irrelevant
+ * text such as "blank" while navigating the chat surface. NVDA / JAWS announce
+ * "blank" when they encounter:
+ *   - an element with an announceable role (button, link, textbox, listitem,
+ *     progressbar, etc.) that has an empty accessible name (no aria-label, no
+ *     aria-labelledby, no associated <label>, and no own text content), OR
+ *   - a live region (`aria-live="polite"` / `aria-live="assertive"`) that is
+ *     mounted with empty text content (each tick announces "blank").
+ *
+ * This catcher walks several rendered LCW surfaces and asserts neither pattern
+ * is present. Deterministic DOM contract — no SR needed.
+ *
+ * Surfaces covered today:
+ *   - ChatButton (default props) — regression guard; passes today.
+ *   - ChatButton with notification bubble forced visible at unreadCount=0 —
+ *     regression guard for the empty-live-region path; passes today.
+ *   - LoadingPane (default props) — regression guard; passes today.
+ *
+ * Scope note: the original bug surfaces inside WebChat-rendered chat session
+ * content (message bubbles, attachments, agent-supplied HTML), which is not
+ * reachable from chat-components unit tests. The Playwright catcher
+ * `automation_tests/e2e/areas/accessibility/blankAnnouncements.spec.ts` on
+ * `chore/a11y-tooling-foundation` walks the full a11y tree of a built
+ * `dist/out.js` and is the right vehicle for enumerating per-offender fixes.
+ * Promote additional surfaces here as they are wired into the catcher harness.
+ */
+
+beforeAll(() => {
+  BroadcastServiceInitialize("testChannel");
+});
+afterEach(() => {
+  cleanup();
+});
+const ANNOUNCEABLE_ROLES = new Set(["button", "link", "textbox", "combobox", "listbox", "listitem", "menu", "menuitem", "checkbox", "radio", "switch", "tab", "treeitem", "option", "searchbox", "progressbar", "alert", "status"]);
+const ANNOUNCEABLE_TAGS = new Set(["button", "a", "input", "select", "textarea"]);
+const isInsideAriaHidden = el => {
+  let cursor = el;
+  while (cursor) {
+    if (cursor.getAttribute("aria-hidden") === "true") return true;
+    cursor = cursor.parentElement;
+  }
+  return false;
+};
+const accessibleNameOf = el => {
+  const ariaLabel = (el.getAttribute("aria-label") || "").trim();
+  if (ariaLabel) return ariaLabel;
+  const labelledBy = (el.getAttribute("aria-labelledby") || "").trim();
+  if (labelledBy) {
+    const referenced = labelledBy.split(/\s+/).map(id => {
+      var _document$getElementB;
+      return ((_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.textContent) || "";
+    }).join(" ").trim();
+    if (referenced) return referenced;
+  }
+  if (el.tagName.toLowerCase() === "input") {
+    const id = el.id;
+    if (id) {
+      var _label$textContent;
+      const label = document.querySelector(`label[for="${CSS.escape(id)}"]`);
+      const labelText = label === null || label === void 0 || (_label$textContent = label.textContent) === null || _label$textContent === void 0 ? void 0 : _label$textContent.trim();
+      if (labelText) return labelText;
+    }
+    const placeholder = (el.getAttribute("placeholder") || "").trim();
+    if (placeholder) return placeholder;
+  }
+  if (el.tagName.toLowerCase() === "a") {
+    const title = (el.getAttribute("title") || "").trim();
+    if (title) return title;
+  }
+  return (el.textContent || "").trim();
+};
+const isAnnounceable = el => {
+  if (isInsideAriaHidden(el)) return false;
+  const role = (el.getAttribute("role") || "").toLowerCase();
+  if (role === "presentation" || role === "none") return false;
+  if (role && ANNOUNCEABLE_ROLES.has(role)) return true;
+  if (ANNOUNCEABLE_TAGS.has(el.tagName.toLowerCase())) {
+    // <input type="hidden"> is not announceable.
+    if (el.tagName.toLowerCase() === "input" && (el.getAttribute("type") || "").toLowerCase() === "hidden") {
+      return false;
+    }
+    return true;
+  }
+  return false;
+};
+const findEmptyAnnounceable = root => {
+  return Array.from(root.querySelectorAll("*")).filter(el => isAnnounceable(el) && accessibleNameOf(el) === "");
+};
+const findEmptyLiveRegions = root => {
+  return Array.from(root.querySelectorAll("[aria-live]")).filter(el => {
+    if (isInsideAriaHidden(el)) return false;
+    const live = (el.getAttribute("aria-live") || "").toLowerCase();
+    if (live !== "polite" && live !== "assertive") return false;
+    return (el.textContent || "").trim() === "";
+  });
+};
+const summarize = offenders => offenders.map(el => ({
+  tag: el.tagName.toLowerCase(),
+  id: el.id,
+  role: el.getAttribute("role"),
+  ariaLabel: el.getAttribute("aria-label"),
+  ariaLabelledBy: el.getAttribute("aria-labelledby"),
+  classes: el.className
+}));
+describe("ChatButton — 'blank' / empty-name announcements (internal tracking regression guard)", () => {
+  it("no announceable role/tag in the chat-button subtree may have an empty accessible name", () => {
+    const _render = render(/*#__PURE__*/React.createElement(ChatButton, defaultChatButtonProps)),
+      container = _render.container;
+    const button = container.firstElementChild;
+    expect(button).not.toBeNull();
+    expect(summarize(findEmptyAnnounceable(button))).toEqual([]);
+  });
+  it("no live region (aria-live=polite/assertive) in the chat-button subtree may be mounted with empty text", () => {
+    const props = {
+      ...defaultChatButtonProps,
+      controlProps: {
+        ...defaultChatButtonProps.controlProps,
+        unreadMessageCount: "0",
+        hideNotificationBubble: false
+      }
+    };
+    const _render2 = render(/*#__PURE__*/React.createElement(ChatButton, props)),
+      container = _render2.container;
+    const button = container.firstElementChild;
+    expect(button).not.toBeNull();
+    expect(summarize(findEmptyLiveRegions(button))).toEqual([]);
+  });
+});
+describe("LoadingPane — 'blank' / empty-name announcements (internal tracking regression guard)", () => {
+  it("no announceable role/tag in the loading-pane subtree may have an empty accessible name", () => {
+    const _render3 = render(/*#__PURE__*/React.createElement(LoadingPane, defaultLoadingPaneProps)),
+      container = _render3.container;
+    const pane = container.firstElementChild;
+    expect(pane).not.toBeNull();
+    expect(summarize(findEmptyAnnounceable(pane))).toEqual([]);
+  });
+  it("no live region (aria-live=polite/assertive) in the loading-pane subtree may be mounted with empty text", () => {
+    const _render4 = render(/*#__PURE__*/React.createElement(LoadingPane, defaultLoadingPaneProps)),
+      container = _render4.container;
+    const pane = container.firstElementChild;
+    expect(pane).not.toBeNull();
+    expect(summarize(findEmptyLiveRegions(pane))).toEqual([]);
+  });
+});