Disable "noKeyboard" logic for IE11

CHANGELOG.md

@@ -36,6 +36,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#3816](https://github.com/microsoft/BotFramework-WebChat/issues/3816). De-bumped Node.js engine requirement for Direct Line Speech SDK to `>= 10.14.2` from `>= 12.0.0`, by [@compulim](https://github.com/compulim) in PR [#3854](https://github.com/microsoft/BotFramework-WebChat/pull/3854)
 -  Fixes [#3842](https://github.com/microsoft/BotFramework-WebChat/issues/3842). Updated [`husky`](https://npmjs.com/package/husky), [`lint-staged`](https://npmjs.com/package/lint-staged) and corresponding `precommit` scripts, by [@compulim](https://github.com/compulim), in PR [#3871](https://github.com/microsoft/BotFramework-WebChat/pull/3871)
 -  Improved test reliability and added snapshots to console of test harness in development mode, by [@compulim](https://github.com/compulim), in PR [#3891](https://github.com/microsoft/BotFramework-WebChat/pull/3891)
+-  Fixes [#3757](https://github.com/microsoft/BotFramework-WebChat/issues/3757). IE11: Send box should not be disabled after pressing <kbd>ESCAPE</kbd> key in the transcript, by [@compulim](https://github.com/compulim), in PR [#3902](https://github.com/microsoft/BotFramework-WebChat/pull/3902)
+-  Fixes [#3901](https://github.com/microsoft/BotFramework-WebChat/issues/3901). IE11: SVG icons for buttons should not be focusable, by [@compulim](https://github.com/compulim), in PR [#3902](https://github.com/microsoft/BotFramework-WebChat/pull/3902)
 
 ### Changed
 

packages/component/src/Attachment/Assets/DownloadIcon.js

@@ -4,7 +4,13 @@ import React from 'react';
 const ICON_SIZE_FACTOR = 22;
 
 const DownloadIcon = ({ className, size }) => (
-  <svg className={className} height={ICON_SIZE_FACTOR * size} viewBox="0 0 31.8 46" width={ICON_SIZE_FACTOR * size}>
+  <svg
+    className={className}
+    focusable={false}
+    height={ICON_SIZE_FACTOR * size}
+    viewBox="0 0 31.8 46"
+    width={ICON_SIZE_FACTOR * size}
+  >
     <path d="M26.8,23.8l-10.9,11L5,23.8l1.6-1.6l8.2,8.3V5H17v25.5l8.2-8.3L26.8,23.8z M5.8,41v-2.2H26V41H5.8z" />
   </svg>
 );

packages/component/src/SendBox/Assets/AttachmentIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const AttachmentIcon = () => (
-  <svg height={28} viewBox="0 0 25.75 46" width={28}>
+  <svg focusable={false} height={28} viewBox="0 0 25.75 46" width={28}>
     <path
       clipRule="evenodd"
       d="M20.75 11.75v21.37a7.69 7.69 0 0 1-.62 3.07 7.95 7.95 0 0 1-4.19 4.19 7.89 7.89 0 0 1-6.13 0 7.95 7.95 0 0 1-4.19-4.19 7.69 7.69 0 0 1-.62-3.07v-22.5a5.27 5.27 0 0 1 .45-2.17 5.69 5.69 0 0 1 3-3 5.48 5.48 0 0 1 4.35 0 5.69 5.69 0 0 1 3 3 5.27 5.27 0 0 1 .45 2.17v22.5a3.41 3.41 0 0 1-.26 1.32 3.31 3.31 0 0 1-1.8 1.8 3.46 3.46 0 0 1-2.63 0 3.31 3.31 0 0 1-1.8-1.8 3.41 3.41 0 0 1-.26-1.32V14h2.25v19.12a1.13 1.13 0 1 0 2.25 0v-22.5a3.4 3.4 0 0 0-.26-1.31 3.31 3.31 0 0 0-1.8-1.8 3.46 3.46 0 0 0-2.63 0 3.31 3.31 0 0 0-1.8 1.8 3.4 3.4 0 0 0-.26 1.31v22.5a5.32 5.32 0 0 0 .45 2.18 5.69 5.69 0 0 0 3 3 5.48 5.48 0 0 0 4.35 0 5.69 5.69 0 0 0 3-3 5.32 5.32 0 0 0 .45-2.18v-21.37z"

packages/component/src/SendBox/Assets/MicrophoneIcon.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 // eslint-disable-next-line react/prop-types
 const MicrophoneIcon = ({ className }) => (
-  <svg className={className} height={28} viewBox="0 0 34.75 46" width={28}>
+  <svg className={className} focusable={false} height={28} viewBox="0 0 34.75 46" width={28}>
     <path
       className="a"
       d="M29.75,23v6.36a7,7,0,0,1-.56,2.78,7.16,7.16,0,0,1-3.8,3.8,7,7,0,0,1-2.78.56H18.5v2.25H23V41H11.75v-2.25h4.5V36.5h-4.11a7,7,0,0,1-2.78-.56,7.16,7.16,0,0,1-3.8-3.8,7,7,0,0,1-.56-2.78V23h2.25v6.36a4.72,4.72,0,0,0,.39,1.9,4.78,4.78,0,0,0,2.6,2.6,4.72,4.72,0,0,0,1.9.39h10.47a4.72,4.72,0,0,0,1.9-.39,4.78,4.78,0,0,0,2.6-2.6,4.72,4.72,0,0,0,.39-1.9V23Zm-18,5.62a1.13,1.13,0,0,0,1.13,1.13h9a1.13,1.13,0,0,0,1.12-1.13V8.38a1.13,1.13,0,0,0-1.12-1.13h-9a1.13,1.13,0,0,0-1.13,1.13Zm1.13,3.38a3.41,3.41,0,0,1-1.32-.26,3.31,3.31,0,0,1-1.8-1.8,3.41,3.41,0,0,1-.26-1.32V8.38a3.41,3.41,0,0,1,.26-1.32,3.31,3.31,0,0,1,1.8-1.8,3.41,3.41,0,0,1,1.32-.26h9a3.4,3.4,0,0,1,1.31.26,3.31,3.31,0,0,1,1.8,1.8,3.41,3.41,0,0,1,.26,1.32v20.24a3.41,3.41,0,0,1-.26,1.32,3.31,3.31,0,0,1-1.8,1.8,3.4,3.4,0,0,1-1.31.26Z"

packages/component/src/SendBox/TextBox.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useRef } from 'react';
 
+import { ie11 } from '../Utils/detectBrowser';
 import AccessibleInputText from '../Utils/AccessibleInputText';
 import AutoResizeTextArea from './AutoResizeTextArea';
 import connectToWebChat from '../connectToWebChat';
@@ -332,7 +333,10 @@ const TextBox = ({ className }) => {
       const { current } = inputElementRef;
 
       if (current) {
-        if (noKeyboard) {
+        // The "disable soft keyboard on mobile devices" logic will not work on IE11. It will cause the <input> to become read-only until next focus.
+        // Thus, no mobile devices carry IE11 so we don't need to explicitly disable soft keyboard on IE11.
+        // See #3757 for repro and details.
+        if (noKeyboard && !ie11) {
           // To not activate the virtual keyboard while changing focus to an input, we will temporarily set it as read-only and flip it back.
           // https://stackoverflow.com/questions/7610758/prevent-iphone-default-keyboard-when-focusing-an-input/7610923
           const readOnly = current.getAttribute('readonly');

packages/component/src/Toast/CollapseIcon.js

@@ -2,7 +2,14 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const CollapseIcon = ({ className }) => (
-  <svg className={(className || '') + ''} height="9" viewBox="0 0 16 9" width="16" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    className={(className || '') + ''}
+    focusable={false}
+    height="9"
+    viewBox="0 0 16 9"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path d="M15.2734 8.97656L8 1.71094L0.726563 8.97656L0.0234375 8.27344L8 0.289062L15.9766 8.27344L15.2734 8.97656Z" />
   </svg>
 );

packages/component/src/Toast/DismissIcon.js

@@ -2,7 +2,14 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const DismissIcon = ({ className }) => (
-  <svg className={(className || '') + ''} height="14" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    className={(className || '') + ''}
+    focusable={false}
+    height="14"
+    viewBox="0 0 14 14"
+    width="14"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path d="M7.71094 7L13.1016 12.3984L12.3984 13.1016L7 7.71094L1.60156 13.1016L0.898438 12.3984L6.28906 7L0.898438 1.60156L1.60156 0.898438L7 6.28906L12.3984 0.898438L13.1016 1.60156L7.71094 7Z" />
   </svg>
 );

packages/component/src/Toast/ExpandIcon.js

@@ -2,7 +2,14 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 const ExpandIcon = ({ className }) => (
-  <svg className={(className || '') + ''} height="10" viewBox="0 0 16 10" width="16" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    className={(className || '') + ''}
+    focusable={false}
+    height="10"
+    viewBox="0 0 16 10"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path d="M15.1484 0.648437L15.8516 1.35156L8 9.20312L0.148438 1.35156L0.851563 0.648438L8 7.79687L15.1484 0.648437Z" />
   </svg>
 );