From f856b8375c5fda8113f18d28946e8c3539518064 Mon Sep 17 00:00:00 2001
From: William Wong <compulim@users.noreply.github.com>
Date: Wed, 15 Feb 2023 12:19:00 -0800
Subject: [PATCH] Screen reader should read alert when sending empty message or
 offline (#4637)

* Alert when sending empty message

* Add offline error

* Fix tests

* Cosmetics

* Apply suggestions from code review

Co-authored-by: Benjamin Yackley <113474767+beyackle2@users.noreply.github.com>

---------

Co-authored-by: Benjamin Yackley <113474767+beyackle2@users.noreply.github.com>
---
 CHANGELOG.md                                  |   2 +-
 ...rtEmptyMessage.multilineTextBox.enter.html |  56 +++++++
 ...lertEmptyMessage.multilineTextBox.enter.js |   6 +
 ....sendBox.alertEmptyMessage.sendButton.html |  67 ++++++++
 ...ty.sendBox.alertEmptyMessage.sendButton.js |   6 +
 ...tEmptyMessage.singleLineTextBox.enter.html |  53 +++++++
 ...ertEmptyMessage.singleLineTextBox.enter.js |   6 +
 ...ility.sendBox.alertOffline.sendButton.html |  53 +++++++
 ...ibility.sendBox.alertOffline.sendButton.js |   6 +
 __tests__/html/useTextBoxSubmit.true.html     |  46 ------
 __tests__/html/useTextBoxSubmit.true.js       |   3 -
 packages/component/package-lock.json          | 102 +++++-------
 packages/component/package.json               |   3 +-
 packages/component/src/BasicSendBox.tsx       |   7 +-
 packages/component/src/Composer.tsx           |   8 +-
 .../src/SendBox/AutoResizeTextArea.tsx        |   5 +
 packages/component/src/SendBox/SendButton.tsx |  21 +--
 packages/component/src/SendBox/TextBox.tsx    |  54 +++----
 .../src/Utils/AccessibleInputText.tsx         |   5 +
 .../internal/SendBox/SendBoxComposer.tsx      | 150 ++++++++++++++++++
 .../internal/SendBox/private/Context.ts       |   7 +
 .../internal/SendBox/private/types.ts         |   6 +
 .../internal/SendBox/private/useContext.ts    |  15 ++
 .../internal/SendBox/useErrorMessageId.ts     |  15 ++
 .../providers/internal/SendBox/useSubmit.ts   |  17 ++
 packages/core/src/sagas/submitSendBoxSaga.js  |   3 +
 .../globals/pageElements/sendBoxTextBox.js    |   2 +-
 .../testHelpers/createDirectLineEmulator.js   |  10 +-
 28 files changed, 575 insertions(+), 159 deletions(-)
 create mode 100644 __tests__/html/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.html
 create mode 100644 __tests__/html/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.js
 create mode 100644 __tests__/html/accessibility.sendBox.alertEmptyMessage.sendButton.html
 create mode 100644 __tests__/html/accessibility.sendBox.alertEmptyMessage.sendButton.js
 create mode 100644 __tests__/html/accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.html
 create mode 100644 __tests__/html/accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.js
 create mode 100644 __tests__/html/accessibility.sendBox.alertOffline.sendButton.html
 create mode 100644 __tests__/html/accessibility.sendBox.alertOffline.sendButton.js
 delete mode 100644 __tests__/html/useTextBoxSubmit.true.html
 delete mode 100644 __tests__/html/useTextBoxSubmit.true.js
 create mode 100644 packages/component/src/providers/internal/SendBox/SendBoxComposer.tsx
 create mode 100644 packages/component/src/providers/internal/SendBox/private/Context.ts
 create mode 100644 packages/component/src/providers/internal/SendBox/private/types.ts
 create mode 100644 packages/component/src/providers/internal/SendBox/private/useContext.ts
 create mode 100644 packages/component/src/providers/internal/SendBox/useErrorMessageId.ts
 create mode 100644 packages/component/src/providers/internal/SendBox/useSubmit.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index feca5173af..f4f25600b3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,7 +25,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 
 -  Added function to emit status change telemetry event for activities, by [@Erli-ms](https://github.com/Erli-ms), in PR [#4631](https://github.com/microsoft/BotFramework-WebChat/pull/4631)
-
 -  Added ability for developers to customize Web Chat by extending the default UI without having to re-implement existing components, by [@dawolff-ms](https://github.com/dawolff-ms), in PR [#4539](https://github.com/microsoft/BotFramework-WebChat/pull/4539)
 
 ### Fixed
@@ -34,6 +33,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#4566](https://github.com/microsoft/BotFramework-WebChat/issues/4566). For YouTube and Vimeo `<iframe>`, add `sandbox="allow-same-origin allow-scripts"`, by [@compulim](https://github.com/compulim) in PR [#4567](https://github.com/microsoft/BotFramework-WebChat/pull/4567)
 -  Fixes [#4561](https://github.com/microsoft/BotFramework-WebChat/issues/4561). Header title of keyboard help dialog should be the `aria-labelledby` of the dialog and close button should be the first element of the header, by [@compulim](https://github.com/compulim) in PR [#4609](https://github.com/microsoft/BotFramework-WebChat/pull/4609)
 -  Fixes [#4559](https://github.com/microsoft/BotFramework-WebChat/issues/4559). Keyboard help screen should be scrollable and its close button should appear correctly in light-themed high contrast mode, by [@compulim](https://github.com/compulim) in PR [#4619](https://github.com/microsoft/BotFramework-WebChat/pull/4619)
+-  Fixes [#4623](https://github.com/microsoft/BotFramework-WebChat/issues/4623). Screen reader should read error when failed to send an empty message or offline, by [@compulim](https://github.com/compulim) in PR [#4637](https://github.com/microsoft/BotFramework-WebChat/pull/4637)
 
 ### Changed
 
diff --git a/__tests__/html/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.html b/__tests__/html/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.html
new file mode 100644
index 0000000000..b3db659fa1
--- /dev/null
+++ b/__tests__/html/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      run(async function () {
+        const clock = lolex.install();
+
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        // GIVEN: With a multiline text area.
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store,
+            styleOptions: {
+              sendBoxTextWrap: true
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.webChatRendered();
+
+        clock.tick(600);
+
+        await pageConditions.uiConnected();
+
+        const [errorMessage] = document.getElementsByClassName('webchat__submit-error-message');
+
+        // GIVEN: The send box is empty.
+        await host.click(pageElements.sendBoxTextBox());
+        await host.sendKeys('ENTER');
+
+        // THEN: The alert message should be empty.
+        expect(errorMessage.innerText).toBe('');
+        clock.tick(50);
+
+        // THEN: After 50 ms, the alert message should read "Cannot send empty message."
+        expect(errorMessage.innerText).toBe('Cannot send empty message.');
+
+        // THEN: After 500 ms, the alert message should be empty.
+        clock.tick(500);
+        expect(errorMessage.innerText).toBe('');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.js b/__tests__/html/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.js
new file mode 100644
index 0000000000..ad511ac776
--- /dev/null
+++ b/__tests__/html/accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.js
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('accessibility requirement', () => {
+  describe('when pressing ENTER on an empty multiline send box', () =>
+    test('should alert about empty message', () => runHTML('accessibility.sendBox.alertEmptyMessage.multilineTextBox.enter.html')));
+});
diff --git a/__tests__/html/accessibility.sendBox.alertEmptyMessage.sendButton.html b/__tests__/html/accessibility.sendBox.alertEmptyMessage.sendButton.html
new file mode 100644
index 0000000000..253dd8c94f
--- /dev/null
+++ b/__tests__/html/accessibility.sendBox.alertEmptyMessage.sendButton.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      run(async function () {
+        const clock = lolex.install();
+
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.webChatRendered();
+
+        clock.tick(600);
+
+        await pageConditions.uiConnected();
+
+        const [errorMessage] = document.getElementsByClassName('webchat__submit-error-message');
+
+        // GIVEN: The send box is empty.
+
+        // WHEN: Send button is clicked.
+        await pageObjects.clickSendButton();
+
+        // THEN: The alert message should be empty.
+        expect(errorMessage.innerText).toBe('');
+
+        // THEN: After 50 ms, the alert message should read "Cannot send empty message."
+        clock.tick(50);
+        expect(errorMessage.innerText).toBe('Cannot send empty message.');
+
+        // THEN: After 500 ms, the alert message should be empty.
+        clock.tick(500);
+        expect(errorMessage.innerText).toBe('');
+
+        // WHEN: Send button is clicked again.
+        await pageObjects.clickSendButton();
+
+        // THEN: The alert message should be empty.
+        expect(errorMessage.innerText).toBe('');
+
+        // THEN: After 50 ms, the alert message should read "Cannot send empty message."
+        clock.tick(50);
+        expect(errorMessage.innerText).toBe('Cannot send empty message.');
+
+        // THEN: After 500 ms, the alert message should be empty.
+        clock.tick(500);
+        expect(errorMessage.innerText).toBe('');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.sendBox.alertEmptyMessage.sendButton.js b/__tests__/html/accessibility.sendBox.alertEmptyMessage.sendButton.js
new file mode 100644
index 0000000000..8768f845f0
--- /dev/null
+++ b/__tests__/html/accessibility.sendBox.alertEmptyMessage.sendButton.js
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('accessibility requirement', () => {
+  describe('when clicking on send box with an empty send box', () =>
+    test('should alert about empty message', () => runHTML('accessibility.sendBox.alertEmptyMessage.sendButton.html')));
+});
diff --git a/__tests__/html/accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.html b/__tests__/html/accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.html
new file mode 100644
index 0000000000..8bcc1d5239
--- /dev/null
+++ b/__tests__/html/accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      run(async function () {
+        const clock = lolex.install();
+
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        // GIVEN: With a single line text box.
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.webChatRendered();
+
+        clock.tick(600);
+
+        await pageConditions.uiConnected();
+
+        const [errorMessage] = document.getElementsByClassName('webchat__submit-error-message');
+
+        // GIVEN: The send box is empty.
+        await host.click(pageElements.sendBoxTextBox());
+        await host.sendKeys('ENTER');
+
+        // THEN: The alert message should be empty.
+        expect(errorMessage.innerText).toBe('');
+
+        // THEN: After 50 ms, the alert message should read "Cannot send empty message."
+        clock.tick(50);
+        expect(errorMessage.innerText).toBe('Cannot send empty message.');
+
+        // THEN: After 500 ms, the alert message should be empty.
+        clock.tick(500);
+        expect(errorMessage.innerText).toBe('');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.js b/__tests__/html/accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.js
new file mode 100644
index 0000000000..64bfd9cb2d
--- /dev/null
+++ b/__tests__/html/accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.js
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('accessibility requirement', () => {
+  describe('when pressing ENTER on an empty single line send box', () =>
+    test('should alert about empty message', () => runHTML('accessibility.sendBox.alertEmptyMessage.singleLineTextBox.enter.html')));
+});
diff --git a/__tests__/html/accessibility.sendBox.alertOffline.sendButton.html b/__tests__/html/accessibility.sendBox.alertOffline.sendButton.html
new file mode 100644
index 0000000000..cd2cbc6637
--- /dev/null
+++ b/__tests__/html/accessibility.sendBox.alertOffline.sendButton.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      run(async function () {
+        const clock = lolex.install();
+
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store, { autoConnect: false });
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.webChatRendered();
+
+        // GIVEN: Connection is still establishing.
+        expect(pageElements.connectivityStatus().innerText).toBe('Connecting…');
+
+        const [errorMessage] = document.getElementsByClassName('webchat__submit-error-message');
+
+        // GIVEN: "Hello, World!" is in the send box.
+        await pageObjects.typeInSendBox('Hello, World!');
+
+        // WHEN: Send button is clicked.
+        await pageObjects.clickSendButton();
+
+        // THEN: The alert message should be empty.
+        expect(errorMessage.innerText).toBe('');
+
+        // THEN: After 50 ms, the alert message should read "Unable to connect."
+        clock.tick(50);
+        expect(errorMessage.innerText).toBe('Unable to connect.');
+
+        // THEN: After 500 ms, the alert message should be empty.
+        clock.tick(500);
+        expect(errorMessage.innerText).toBe('');
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/accessibility.sendBox.alertOffline.sendButton.js b/__tests__/html/accessibility.sendBox.alertOffline.sendButton.js
new file mode 100644
index 0000000000..81fdbfd159
--- /dev/null
+++ b/__tests__/html/accessibility.sendBox.alertOffline.sendButton.js
@@ -0,0 +1,6 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('accessibility requirement', () => {
+  describe('when clicking on send button while offline', () =>
+    test('should alert about offline', () => runHTML('accessibility.sendBox.alertOffline.sendButton.html')));
+});
diff --git a/__tests__/html/useTextBoxSubmit.true.html b/__tests__/html/useTextBoxSubmit.true.html
deleted file mode 100644
index d81350a1a3..0000000000
--- a/__tests__/html/useTextBoxSubmit.true.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
-    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
-    <script crossorigin="anonymous" src="/test-harness.js"></script>
-    <script crossorigin="anonymous" src="/test-page-object.js"></script>
-    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
-    <style type="text/css">
-      :focus {
-        background-color: cyan !important;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="webchat"></div>
-    <script>
-      run(
-        async function () {
-          const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
-          const store = testHelpers.createStore();
-
-          WebChat.renderWebChat(
-            {
-              activityMiddleware: testHelpers.createRunHookActivityMiddleware(),
-              directLine,
-              store
-            },
-            document.getElementById('webchat')
-          );
-
-          await pageConditions.uiConnected();
-          await pageObjects.typeInSendBox('Hello');
-          await pageObjects.runHook(({ useTextBoxSubmit }) => useTextBoxSubmit()(true));
-          await pageConditions.allOutgoingActivitiesSent();
-
-          // When using runHookActivityMiddleware, an additional hidden activity will be rendered to run the hook function. Thus, minNumActivitiesShown must be +1.
-          await pageConditions.minNumActivitiesShown(3);
-
-          await host.snapshot();
-        },
-        { expectDeprecations: true }
-      );
-    </script>
-  </body>
-</html>
diff --git a/__tests__/html/useTextBoxSubmit.true.js b/__tests__/html/useTextBoxSubmit.true.js
deleted file mode 100644
index fdd4125b75..0000000000
--- a/__tests__/html/useTextBoxSubmit.true.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
-
-test('useTextBoxSubmit and set focus to true', () => runHTML('useTextBoxSubmit.true.html'));
diff --git a/packages/component/package-lock.json b/packages/component/package-lock.json
index 8fd766b655..d725db411c 100644
--- a/packages/component/package-lock.json
+++ b/packages/component/package-lock.json
@@ -24,7 +24,8 @@
         "react-say": "2.1.0",
         "react-scroll-to-bottom": "4.2.0",
         "redux": "4.2.0",
-        "simple-update-in": "2.2.0"
+        "simple-update-in": "2.2.0",
+        "use-ref-from": "0.0.1"
       },
       "devDependencies": {
         "@babel/cli": "^7.18.10",
@@ -1788,12 +1789,12 @@
       }
     },
     "node_modules/@babel/runtime-corejs3": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.14.7.tgz",
-      "integrity": "sha512-Wvzcw4mBYbTagyBVZpAJWI06auSIj033T/yNE0Zn1xcup83MieCddZA7ls3kme17L4NOGBrQ09Q+nKB41RLWBA==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.20.13.tgz",
+      "integrity": "sha512-p39/6rmY9uvlzRiLZBIB3G9/EBr66LBMcYm7fIDeSBNdRjF2AGD3rFZucUyAgGHC2N+7DdLvVi33uTjSE44FIw==",
       "dependencies": {
-        "core-js-pure": "^3.15.0",
-        "regenerator-runtime": "^0.13.4"
+        "core-js-pure": "^3.25.1",
+        "regenerator-runtime": "^0.13.11"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2632,9 +2633,9 @@
       }
     },
     "node_modules/core-js-pure": {
-      "version": "3.15.2",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.15.2.tgz",
-      "integrity": "sha512-D42L7RYh1J2grW8ttxoY1+17Y4wXZeKe7uyplAI3FkNQyI5OgBIAjUfFiTPfL1rs0qLpxaabITNbjKl1Sp82tA==",
+      "version": "3.27.2",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.27.2.tgz",
+      "integrity": "sha512-Cf2jqAbXgWH3VVzjyaaFkY1EBazxugUepGymDoeteyYr9ByX51kD2jdHZlsEF/xnJMyN3Prua7mQuzwMg6Zc9A==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -3770,18 +3771,6 @@
         "react": ">= 16.8.6"
       }
     },
-    "node_modules/react-scroll-to-bottom/node_modules/@babel/runtime-corejs3": {
-      "version": "7.15.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.15.4.tgz",
-      "integrity": "sha512-lWcAqKeB624/twtTc3w6w/2o9RqJPaNBhPGK6DKLSiwuVWC7WFkypWyNg+CpZoyJH0jVzv1uMtXZ/5/lQOLtCg==",
-      "dependencies": {
-        "core-js-pure": "^3.16.0",
-        "regenerator-runtime": "^0.13.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/react-scroll-to-bottom/node_modules/@emotion/css": {
       "version": "11.1.3",
       "resolved": "https://registry.npmjs.org/@emotion/css/-/css-11.1.3.tgz",
@@ -3817,16 +3806,6 @@
         "url": "https://opencollective.com/core-js"
       }
     },
-    "node_modules/react-scroll-to-bottom/node_modules/core-js-pure": {
-      "version": "3.18.3",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.18.3.tgz",
-      "integrity": "sha512-qfskyO/KjtbYn09bn1IPkuhHl5PlJ6IzJ9s9sraJ1EqcuGyLGKzhSM1cY0zgyL9hx42eulQLZ6WaeK5ycJCkqw==",
-      "hasInstallScript": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/core-js"
-      }
-    },
     "node_modules/react-scroll-to-bottom/node_modules/prop-types": {
       "version": "15.7.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
@@ -3877,9 +3856,9 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.13.7",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.0",
@@ -4219,6 +4198,17 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/use-ref-from": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/use-ref-from/-/use-ref-from-0.0.1.tgz",
+      "integrity": "sha512-RcY9O6iQGZ7B7Gvr4DBbLJBeZO81J/q+JV+Q6CIflM+ANqevrLA1Hcqy9ApPWHfjt6kHdjQ/081XJmC3hrRkmg==",
+      "dependencies": {
+        "@babel/runtime-corejs3": "^7.20.7"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
@@ -5554,12 +5544,12 @@
       }
     },
     "@babel/runtime-corejs3": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.14.7.tgz",
-      "integrity": "sha512-Wvzcw4mBYbTagyBVZpAJWI06auSIj033T/yNE0Zn1xcup83MieCddZA7ls3kme17L4NOGBrQ09Q+nKB41RLWBA==",
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.20.13.tgz",
+      "integrity": "sha512-p39/6rmY9uvlzRiLZBIB3G9/EBr66LBMcYm7fIDeSBNdRjF2AGD3rFZucUyAgGHC2N+7DdLvVi33uTjSE44FIw==",
       "requires": {
-        "core-js-pure": "^3.15.0",
-        "regenerator-runtime": "^0.13.4"
+        "core-js-pure": "^3.25.1",
+        "regenerator-runtime": "^0.13.11"
       }
     },
     "@babel/template": {
@@ -6214,9 +6204,9 @@
       }
     },
     "core-js-pure": {
-      "version": "3.15.2",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.15.2.tgz",
-      "integrity": "sha512-D42L7RYh1J2grW8ttxoY1+17Y4wXZeKe7uyplAI3FkNQyI5OgBIAjUfFiTPfL1rs0qLpxaabITNbjKl1Sp82tA=="
+      "version": "3.27.2",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.27.2.tgz",
+      "integrity": "sha512-Cf2jqAbXgWH3VVzjyaaFkY1EBazxugUepGymDoeteyYr9ByX51kD2jdHZlsEF/xnJMyN3Prua7mQuzwMg6Zc9A=="
     },
     "cosmiconfig": {
       "version": "7.0.1",
@@ -7080,15 +7070,6 @@
         "simple-update-in": "2.2.0"
       },
       "dependencies": {
-        "@babel/runtime-corejs3": {
-          "version": "7.15.4",
-          "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.15.4.tgz",
-          "integrity": "sha512-lWcAqKeB624/twtTc3w6w/2o9RqJPaNBhPGK6DKLSiwuVWC7WFkypWyNg+CpZoyJH0jVzv1uMtXZ/5/lQOLtCg==",
-          "requires": {
-            "core-js-pure": "^3.16.0",
-            "regenerator-runtime": "^0.13.4"
-          }
-        },
         "@emotion/css": {
           "version": "11.1.3",
           "resolved": "https://registry.npmjs.org/@emotion/css/-/css-11.1.3.tgz",
@@ -7111,11 +7092,6 @@
           "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.18.3.tgz",
           "integrity": "sha512-tReEhtMReZaPFVw7dajMx0vlsz3oOb8ajgPoHVYGxr8ErnZ6PcYEvvmjGmXlfpnxpkYSdOQttjB+MvVbCGfvLw=="
         },
-        "core-js-pure": {
-          "version": "3.18.3",
-          "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.18.3.tgz",
-          "integrity": "sha512-qfskyO/KjtbYn09bn1IPkuhHl5PlJ6IzJ9s9sraJ1EqcuGyLGKzhSM1cY0zgyL9hx42eulQLZ6WaeK5ycJCkqw=="
-        },
         "prop-types": {
           "version": "15.7.2",
           "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
@@ -7162,9 +7138,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.7",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "regenerator-transform": {
       "version": "0.15.0",
@@ -7414,6 +7390,14 @@
         "picocolors": "^1.0.0"
       }
     },
+    "use-ref-from": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/use-ref-from/-/use-ref-from-0.0.1.tgz",
+      "integrity": "sha512-RcY9O6iQGZ7B7Gvr4DBbLJBeZO81J/q+JV+Q6CIflM+ANqevrLA1Hcqy9ApPWHfjt6kHdjQ/081XJmC3hrRkmg==",
+      "requires": {
+        "@babel/runtime-corejs3": "^7.20.7"
+      }
+    },
     "uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
diff --git a/packages/component/package.json b/packages/component/package.json
index bbdd85311c..e22643f427 100644
--- a/packages/component/package.json
+++ b/packages/component/package.json
@@ -80,7 +80,8 @@
     "react-say": "2.1.0",
     "react-scroll-to-bottom": "4.2.0",
     "redux": "4.2.0",
-    "simple-update-in": "2.2.0"
+    "simple-update-in": "2.2.0",
+    "use-ref-from": "0.0.1"
   },
   "peerDependencies": {
     "react": ">= 16.8.6",
diff --git a/packages/component/src/BasicSendBox.tsx b/packages/component/src/BasicSendBox.tsx
index 652e2c8733..93362c69a9 100644
--- a/packages/component/src/BasicSendBox.tsx
+++ b/packages/component/src/BasicSendBox.tsx
@@ -3,7 +3,6 @@ import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { FC } from 'react';
-import type { WebChatActivity } from 'botframework-webchat-core';
 
 import DictationInterims from './SendBox/DictationInterims';
 import MicrophoneButton from './SendBox/MicrophoneButton';
@@ -11,10 +10,13 @@ import SendButton from './SendBox/SendButton';
 import SuggestedActions from './SendBox/SuggestedActions';
 import TextBox from './SendBox/TextBox';
 import UploadButton from './SendBox/UploadButton';
+import useErrorMessageId from './providers/internal/SendBox/useErrorMessageId';
 import useStyleSet from './hooks/useStyleSet';
 import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
 import useWebSpeechPonyfill from './hooks/useWebSpeechPonyfill';
 
+import type { WebChatActivity } from 'botframework-webchat-core';
+
 const {
   DictateState: { DICTATING, STARTING }
 } = Constants;
@@ -55,6 +57,7 @@ const BasicSendBox: FC<BasicSendBoxProps> = ({ className }) => {
   const [{ sendBox: sendBoxStyleSet }] = useStyleSet();
   const [{ SpeechRecognition = undefined } = {}] = useWebSpeechPonyfill();
   const [direction] = useDirection();
+  const [errorMessageId] = useErrorMessageId();
   const [speechInterimsVisible] = useSendBoxSpeechInterimsVisible();
   const styleToEmotionObject = useStyleToEmotionObject();
 
@@ -70,6 +73,8 @@ const BasicSendBox: FC<BasicSendBoxProps> = ({ className }) => {
 
   return (
     <div
+      aria-errormessage={errorMessageId}
+      aria-invalid={!!errorMessageId}
       className={classNames('webchat__send-box', sendBoxStyleSet + '', rootClassName + '', (className || '') + '')}
       dir={direction}
       role="form"
diff --git a/packages/component/src/Composer.tsx b/packages/component/src/Composer.tsx
index 2aa602c89c..354478b457 100644
--- a/packages/component/src/Composer.tsx
+++ b/packages/component/src/Composer.tsx
@@ -27,6 +27,7 @@ import Dictation from './Dictation';
 import downscaleImageToDataURL from './Utils/downscaleImageToDataURL';
 import ErrorBox from './ErrorBox';
 import mapMap from './Utils/mapMap';
+import SendBoxComposer from './providers/internal/SendBox/SendBoxComposer';
 import UITracker from './hooks/internal/UITracker';
 import WebChatUIContext from './hooks/internal/WebChatUIContext';
 
@@ -227,8 +228,11 @@ const ComposerCore: FC<ComposerCoreProps> = ({
   return (
     <SayComposer ponyfill={webSpeechPonyfill}>
       <WebChatUIContext.Provider value={context}>
-        {children}
-        <Dictation onError={dictationOnError} />
+        {/* When <SendBoxComposer> is finalized, it will be using an independent instance that lives inside <BasicSendBox>. */}
+        <SendBoxComposer>
+          {children}
+          <Dictation onError={dictationOnError} />
+        </SendBoxComposer>
       </WebChatUIContext.Provider>
     </SayComposer>
   );
diff --git a/packages/component/src/SendBox/AutoResizeTextArea.tsx b/packages/component/src/SendBox/AutoResizeTextArea.tsx
index 5c0c7091a3..3007ac1b44 100644
--- a/packages/component/src/SendBox/AutoResizeTextArea.tsx
+++ b/packages/component/src/SendBox/AutoResizeTextArea.tsx
@@ -13,6 +13,7 @@ import useEnterKeyHint from '../hooks/internal/useEnterKeyHint';
 import useStyleSet from '../hooks/useStyleSet';
 
 type AutoResizeTextAreaProps = {
+  'aria-errormessage'?: string;
   'aria-label'?: string;
   className?: string;
   'data-id'?: string;
@@ -35,6 +36,7 @@ type AutoResizeTextAreaProps = {
 const AutoResizeTextArea = forwardRef<HTMLTextAreaElement, AutoResizeTextAreaProps>(
   (
     {
+      'aria-errormessage': ariaErrorMessage,
       'aria-label': ariaLabel,
       className,
       'data-id': dataId,
@@ -66,6 +68,7 @@ const AutoResizeTextArea = forwardRef<HTMLTextAreaElement, AutoResizeTextAreaPro
           {value}&nbsp;
         </div>
         <AccessibleTextArea
+          aria-errormessage={ariaErrorMessage}
           aria-label={ariaLabel}
           className={classNames('webchat__auto-resize-textarea__textarea', textAreaClassName)}
           data-id={dataId}
@@ -89,6 +92,7 @@ const AutoResizeTextArea = forwardRef<HTMLTextAreaElement, AutoResizeTextAreaPro
 );
 
 AutoResizeTextArea.defaultProps = {
+  'aria-errormessage': undefined,
   'aria-label': undefined,
   'data-id': undefined,
   className: undefined,
@@ -109,6 +113,7 @@ AutoResizeTextArea.defaultProps = {
 };
 
 AutoResizeTextArea.propTypes = {
+  'aria-errormessage': PropTypes.string,
   'aria-label': PropTypes.string,
   className: PropTypes.string,
   'data-id': PropTypes.string,
diff --git a/packages/component/src/SendBox/SendButton.tsx b/packages/component/src/SendBox/SendButton.tsx
index c30df3e43b..b3409a3ce8 100644
--- a/packages/component/src/SendBox/SendButton.tsx
+++ b/packages/component/src/SendBox/SendButton.tsx
@@ -1,15 +1,16 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { FC, useCallback } from 'react';
+import React, { useCallback } from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 import IconButton from './IconButton';
 import SendIcon from './Assets/SendIcon';
-import useFocus from '../hooks/useFocus';
-import useScrollToEnd from '../hooks/useScrollToEnd';
+import useSubmit from '../providers/internal/SendBox/useSubmit';
 
-const { useDisabled, useLocalizer, useSubmitSendBox } = hooks;
+import type { FC } from 'react';
+
+const { useDisabled, useLocalizer } = hooks;
 
 const connectSendButton = (...selectors) =>
   connectToWebChat(
@@ -27,16 +28,10 @@ type SendButtonProps = {
 
 const SendButton: FC<SendButtonProps> = ({ className }) => {
   const [disabled] = useDisabled();
-  const focus = useFocus();
   const localize = useLocalizer();
-  const scrollToEnd = useScrollToEnd();
-  const submitSendBox = useSubmitSendBox();
-
-  const handleClick = useCallback(() => {
-    focus('sendBoxWithoutKeyboard');
-    scrollToEnd();
-    submitSendBox();
-  }, [focus, scrollToEnd, submitSendBox]);
+  const submit = useSubmit();
+
+  const handleClick = useCallback(() => submit({ setFocus: 'sendBoxWithoutKeyboard' }), [submit]);
 
   return (
     <IconButton
diff --git a/packages/component/src/SendBox/TextBox.tsx b/packages/component/src/SendBox/TextBox.tsx
index 7a54214a93..a965ac3aa4 100644
--- a/packages/component/src/SendBox/TextBox.tsx
+++ b/packages/component/src/SendBox/TextBox.tsx
@@ -8,18 +8,17 @@ import AccessibleInputText from '../Utils/AccessibleInputText';
 import AutoResizeTextArea from './AutoResizeTextArea';
 import connectToWebChat from '../connectToWebChat';
 import navigableEvent from '../Utils/TypeFocusSink/navigableEvent';
-import useFocus from '../hooks/useFocus';
 import useRegisterFocusSendBox from '../hooks/internal/useRegisterFocusSendBox';
 import useReplaceEmoticon from '../hooks/internal/useReplaceEmoticon';
 import useScrollDown from '../hooks/useScrollDown';
-import useScrollToEnd from '../hooks/useScrollToEnd';
 import useScrollUp from '../hooks/useScrollUp';
 import useStyleSet from '../hooks/useStyleSet';
 import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import useSubmit from '../providers/internal/SendBox/useSubmit';
 
 import type { MutableRefObject, ReactEventHandler } from 'react';
 
-const { useDisabled, useLocalizer, useSendBoxValue, useStopDictate, useStyleOptions, useSubmitSendBox } = hooks;
+const { useDisabled, useLocalizer, useSendBoxValue, useStopDictate, useStyleOptions } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__send-box-text-box': {
@@ -69,34 +68,29 @@ const connectSendTextBox = (...selectors) =>
     ...selectors
   );
 
-function useTextBoxSubmit(): (setFocus?: boolean | 'sendBox') => void {
-  const [sendBoxValue] = useSendBoxValue();
-  const focus = useFocus();
-  const scrollToEnd = useScrollToEnd();
-  const submitSendBox = useSubmitSendBox();
-
-  return useCallback(
-    setFocus => {
-      if (sendBoxValue) {
-        scrollToEnd();
-        submitSendBox();
-
-        if (setFocus) {
-          if (setFocus === true) {
-            console.warn(
-              `"botframework-webchat: Passing "true" to "useTextBoxSubmit" is deprecated and will be removed on or after 2022-04-23. Please pass "sendBox" instead."`
-            );
-
-            focus('sendBox');
-          } else {
-            focus(setFocus);
-          }
-        }
-      }
+/**
+ * Submits the text box and optionally set the focus after send.
+ */
+type SubmitTextBoxFunction = {
+  /**
+   * Submits the text box, without setting the focus after send.
+   *
+   * @deprecated Instead of passing `false`, you should leave the `setFocus` argument `undefined`.
+   */
+  (setFocus: false): void;
+
+  /**
+   * Submits the text box and optionally set the focus after send.
+   */
+  (setFocus?: 'sendBox' | 'sendBoxWithoutKeyboard'): void;
+};
 
-      return !!sendBoxValue;
-    },
-    [focus, scrollToEnd, sendBoxValue, submitSendBox]
+function useTextBoxSubmit(): SubmitTextBoxFunction {
+  const submit = useSubmit();
+
+  return useCallback<SubmitTextBoxFunction>(
+    (setFocus?: false | 'sendBox' | 'sendBoxWithoutKeyboard') => submit({ setFocus: setFocus || undefined }),
+    [submit]
   );
 }
 
diff --git a/packages/component/src/Utils/AccessibleInputText.tsx b/packages/component/src/Utils/AccessibleInputText.tsx
index b59c08221c..5afd03c818 100644
--- a/packages/component/src/Utils/AccessibleInputText.tsx
+++ b/packages/component/src/Utils/AccessibleInputText.tsx
@@ -31,6 +31,7 @@ import useEnterKeyHint from '../hooks/internal/useEnterKeyHint';
 // - If the widget is contained by a <form>, the developer need to filter out some `onSubmit` event caused by this widget
 
 type AccessibleInputTextProps = {
+  'aria-errormessage'?: string;
   className?: string;
   disabled?: boolean;
   enterKeyHint?: string;
@@ -51,6 +52,7 @@ type AccessibleInputTextProps = {
 const AccessibleInputText = forwardRef<HTMLInputElement, AccessibleInputTextProps>(
   (
     {
+      'aria-errormessage': ariaErrorMessage,
       className,
       disabled,
       enterKeyHint,
@@ -77,6 +79,7 @@ const AccessibleInputText = forwardRef<HTMLInputElement, AccessibleInputTextProp
     return (
       <input
         aria-disabled={disabled || undefined}
+        aria-errormessage={ariaErrorMessage}
         className={className}
         onChange={disabled ? undefined : onChange}
         onFocus={disabled ? undefined : onFocus}
@@ -97,6 +100,7 @@ const AccessibleInputText = forwardRef<HTMLInputElement, AccessibleInputTextProp
 );
 
 AccessibleInputText.defaultProps = {
+  'aria-errormessage': undefined,
   className: undefined,
   disabled: undefined,
   enterKeyHint: undefined,
@@ -116,6 +120,7 @@ AccessibleInputText.defaultProps = {
 AccessibleInputText.displayName = 'AccessibleInputText';
 
 AccessibleInputText.propTypes = {
+  'aria-errormessage': PropTypes.string,
   className: PropTypes.string,
   disabled: PropTypes.bool,
   enterKeyHint: PropTypes.string,
diff --git a/packages/component/src/providers/internal/SendBox/SendBoxComposer.tsx b/packages/component/src/providers/internal/SendBox/SendBoxComposer.tsx
new file mode 100644
index 0000000000..553643ed0c
--- /dev/null
+++ b/packages/component/src/providers/internal/SendBox/SendBoxComposer.tsx
@@ -0,0 +1,150 @@
+import { hooks } from 'botframework-webchat-api';
+import { useRefFrom } from 'use-ref-from';
+import classNames from 'classnames';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import SendBoxContext from './private/Context';
+import useFocus from '../../../hooks/useFocus';
+import useScrollToEnd from '../../../hooks/useScrollToEnd';
+import useStyleToEmotionObject from '../../../hooks/internal/useStyleToEmotionObject';
+import useUniqueId from '../../../hooks/internal/useUniqueId';
+
+import type { ContextType, SendError } from './private/types';
+import type { PropsWithChildren } from 'react';
+
+const { useConnectivityStatus, useLocalizer, useSendBoxValue, useSubmitSendBox } = hooks;
+
+const SUBMIT_ERROR_MESSAGE_STYLE = {
+  '&.webchat__submit-error-message': {
+    // .sr-only - This component is intended to be invisible to the visual Web Chat user, but read by the AT when using a screen reader
+    color: 'transparent',
+    height: 1,
+    overflow: 'hidden',
+    position: 'absolute',
+    // We need to set top: 0, otherwise, it will repro:
+    // - Run NVDA
+    // - Make the transcript long enough to show the scrollbar
+    // - Press SHIFT-TAB, focus on upload button
+    // - Press up arrow multiple times
+    top: 0,
+    whiteSpace: 'nowrap',
+    width: 1
+  }
+};
+
+type Timeout = ReturnType<typeof setTimeout>;
+
+const TIME_TO_QUEUE_ERROR_MESSAGE = 500;
+const TIME_TO_RESET_ERROR_MESSAGE = 50;
+
+// This component is marked as internal because it is not fully implemented and is not ready to be consumed publicly.
+// When it is done, it should provide and replace all the functionalities we did in Redux, including but not limited to:
+
+// - Speech interims
+// - Maintain text box value
+// - Multiple <SendBoxComposer> in a single Web Chat instance
+//    - Web devs should be able to put an individual send box instance into an activity
+//    - The send box instance in the activity, should be separated from the bottommost send box
+//    - The valued typed inside the activity, should be separated from the value typed into the bottommost send box
+
+// In the old days, we use Redux to keep the send box state.
+// However, when web devs put 2 send box on their page, it makes things complex because both send boxes will interact with each other.
+// We would rather have them separate. If web devs want them to interact with each other, they will do the wiring themselves.
+
+type ErrorMessageStringMap = ReadonlyMap<SendError, string>;
+
+// TODO: [P2] Complete this component.
+const SendBoxComposer = ({ children }: PropsWithChildren<{}>) => {
+  const [connectivityStatus] = useConnectivityStatus();
+  const [error, setError] = useState<SendError | false>(false);
+  const [sendBoxValue] = useSendBoxValue();
+  const apiSubmitSendBox = useSubmitSendBox();
+  const focus = useFocus();
+  const localize = useLocalizer();
+  const scrollToEnd = useScrollToEnd();
+  const styleToEmotionObject = useStyleToEmotionObject();
+  const submitErrorMessageId = useUniqueId('webchat__send-box__error-message-id');
+  const timeoutRef = useRef<readonly [Timeout, Timeout] | undefined>(undefined);
+
+  const errorMessageStringMap = useMemo<ErrorMessageStringMap>(
+    () =>
+      Object.freeze(
+        new Map<SendError, string>()
+          .set('empty', localize('SEND_BOX_IS_EMPTY_TOOLTIP_ALT'))
+          // TODO: [P0] We should add a new string for "Cannot send message while offline."
+          .set('offline', localize('CONNECTIVITY_STATUS_ALT_FATAL'))
+      ),
+    [localize]
+  );
+  const focusRef = useRefFrom(focus);
+  const scrollToEndRef = useRefFrom(scrollToEnd);
+  const setErrorRef = useRef<typeof setError | undefined>(setError);
+  const submitErrorMessageClassName = styleToEmotionObject(SUBMIT_ERROR_MESSAGE_STYLE) + '';
+  const submitErrorMessageIdState = useMemo<readonly [string | undefined]>(
+    () => Object.freeze([error ? submitErrorMessageId : undefined]) as readonly [string | undefined],
+    [error, submitErrorMessageId]
+  );
+
+  setErrorRef.current = setError;
+
+  const submitErrorRef = useRefFrom<'empty' | 'offline' | undefined>(
+    connectivityStatus !== 'connected' ? 'offline' : !sendBoxValue ? 'empty' : undefined
+  );
+
+  const submit = useCallback<ContextType['submit']>(
+    ({ setFocus } = {}) => {
+      (setFocus === 'main' || setFocus === 'sendBox' || setFocus === 'sendBoxWithoutKeyboard') &&
+        focusRef.current?.(setFocus === 'main' || setFocus === 'sendBox' ? setFocus : 'sendBoxWithoutKeyboard');
+
+      const { current: submitError } = submitErrorRef;
+
+      if (submitError) {
+        timeoutRef.current && timeoutRef.current.forEach(clearTimeout);
+
+        setErrorRef.current?.(false);
+
+        timeoutRef.current = Object.freeze([
+          setTimeout(() => setErrorRef.current?.(submitError), TIME_TO_RESET_ERROR_MESSAGE),
+          setTimeout(() => setErrorRef.current?.(false), TIME_TO_QUEUE_ERROR_MESSAGE)
+        ]) as readonly [Timeout, Timeout];
+      } else {
+        scrollToEndRef.current?.();
+        apiSubmitSendBox();
+      }
+    },
+    [apiSubmitSendBox, focusRef, scrollToEndRef, setErrorRef, submitErrorRef, timeoutRef]
+  );
+
+  useEffect(
+    // Prevent `setTimeout()` from firing after unmount.
+    () => () => {
+      setErrorRef.current = undefined;
+    },
+    [setErrorRef]
+  );
+
+  const context = useMemo(
+    () => ({
+      submit,
+      submitErrorMessageIdState
+    }),
+    [submit, submitErrorMessageIdState]
+  );
+
+  return (
+    <SendBoxContext.Provider value={context}>
+      {children}
+      <span
+        className={classNames('webchat__submit-error-message', submitErrorMessageClassName)}
+        // "id" is required for "aria-errormessage" as IDREF.
+        // eslint-disable-next-line react/forbid-dom-props
+        id={submitErrorMessageId}
+        role="alert"
+      >
+        {error ? errorMessageStringMap.get(error) : ''}
+      </span>
+    </SendBoxContext.Provider>
+  );
+};
+
+export default SendBoxComposer;
diff --git a/packages/component/src/providers/internal/SendBox/private/Context.ts b/packages/component/src/providers/internal/SendBox/private/Context.ts
new file mode 100644
index 0000000000..5e632bab32
--- /dev/null
+++ b/packages/component/src/providers/internal/SendBox/private/Context.ts
@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+import type { ContextType } from './types';
+
+const SendBoxContext = createContext<ContextType | undefined>(undefined);
+
+export default SendBoxContext;
diff --git a/packages/component/src/providers/internal/SendBox/private/types.ts b/packages/component/src/providers/internal/SendBox/private/types.ts
new file mode 100644
index 0000000000..b192ec01fc
--- /dev/null
+++ b/packages/component/src/providers/internal/SendBox/private/types.ts
@@ -0,0 +1,6 @@
+export type ContextType = {
+  submit: (options?: { setFocus?: 'main' | 'sendBox' | 'sendBoxWithoutKeyboard' }) => void;
+  submitErrorMessageIdState: readonly [string];
+};
+
+export type SendError = 'empty' | 'offline';
diff --git a/packages/component/src/providers/internal/SendBox/private/useContext.ts b/packages/component/src/providers/internal/SendBox/private/useContext.ts
new file mode 100644
index 0000000000..ec61c87d06
--- /dev/null
+++ b/packages/component/src/providers/internal/SendBox/private/useContext.ts
@@ -0,0 +1,15 @@
+import { useContext } from 'react';
+
+import Context from './Context';
+
+import type { ContextType } from './types';
+
+export default function useSendBoxContext(): ContextType {
+  const context = useContext(Context);
+
+  if (!context) {
+    throw new Error('botframework-webchat internal: This hook can only be used under <SendBoxComposer>.');
+  }
+
+  return context;
+}
diff --git a/packages/component/src/providers/internal/SendBox/useErrorMessageId.ts b/packages/component/src/providers/internal/SendBox/useErrorMessageId.ts
new file mode 100644
index 0000000000..8487326a58
--- /dev/null
+++ b/packages/component/src/providers/internal/SendBox/useErrorMessageId.ts
@@ -0,0 +1,15 @@
+import useSendBoxContext from './private/useContext';
+
+/**
+ * Subscribes to the `IDREF` of the error message occurred when the user submit the send box.
+ *
+ * This `IDREF` is intended to be use as the value for `aria-errormessage` and `aria-invalid` attribute.
+ *
+ * For example, if the user is clicking on the send button without a message, we will read an alert saying "cannot
+ * send empty message." This `IDREF` will be the HTML element of the hidden alert element.
+ *
+ * If there are no errors when submitting the send box, the `IDREF` will be `undefined`.
+ */
+export default function useSubmitErrorMessageId(): readonly [string | undefined] {
+  return useSendBoxContext().submitErrorMessageIdState;
+}
diff --git a/packages/component/src/providers/internal/SendBox/useSubmit.ts b/packages/component/src/providers/internal/SendBox/useSubmit.ts
new file mode 100644
index 0000000000..576f3b6357
--- /dev/null
+++ b/packages/component/src/providers/internal/SendBox/useSubmit.ts
@@ -0,0 +1,17 @@
+import useSendBoxContext from './private/useContext';
+
+type SubmitOptions = {
+  setFocus?: 'main' | 'sendBox' | 'sendBoxWithoutKeyboard';
+};
+
+/**
+ * Returns a callback function, when called, will send the value of the text box as a message.
+ *
+ * If the message cannot be send immediately, for example, the message is empty. An error message will be read
+ * and the error message element can be referenced by `useErrorMessageId()` hook.
+ *
+ * If the message can be send, after the message is queued, regardless whether it send successfully or not, the text box will be cleared.
+ */
+export default function useSubmit(): (submitOptions?: SubmitOptions) => void {
+  return useSendBoxContext().submit;
+}
diff --git a/packages/core/src/sagas/submitSendBoxSaga.js b/packages/core/src/sagas/submitSendBoxSaga.js
index 8aeb834f7a..0fe169d1d0 100644
--- a/packages/core/src/sagas/submitSendBoxSaga.js
+++ b/packages/core/src/sagas/submitSendBoxSaga.js
@@ -10,6 +10,8 @@ function* submitSendBox() {
   yield takeEvery(SUBMIT_SEND_BOX, function* ({ payload: { channelData, method } }) {
     const sendBoxValue = yield select(sendBoxValueSelector);
 
+    // TODO: [P2] If the trimmed value is empty, we should not send.
+    // TODO: [P2] We should expose this logic ("cannot send empty message") to other components such as UI.
     if (sendBoxValue) {
       yield put(sendMessage(sendBoxValue.trim(), method, { channelData }));
       yield put(setSendBox(''));
@@ -18,5 +20,6 @@ function* submitSendBox() {
 }
 
 export default function* submitSendBoxSaga() {
+  // TODO: [P2] We should expose this logic ("send only when connected") to other components such as UI.
   yield whileConnected(submitSendBox);
 }
diff --git a/packages/test/page-object/src/globals/pageElements/sendBoxTextBox.js b/packages/test/page-object/src/globals/pageElements/sendBoxTextBox.js
index db68218318..401a712821 100644
--- a/packages/test/page-object/src/globals/pageElements/sendBoxTextBox.js
+++ b/packages/test/page-object/src/globals/pageElements/sendBoxTextBox.js
@@ -1,4 +1,4 @@
-const CSS_SELECTOR = '[role="form"] > * > form > input[type="text"]';
+const CSS_SELECTOR = '[role="form"] > * > form > input[type="text"], [role="form"] > * > form textarea';
 
 export default function sendBoxTextBox() {
   return document.querySelector(CSS_SELECTOR);
diff --git a/packages/test/page-object/src/globals/testHelpers/createDirectLineEmulator.js b/packages/test/page-object/src/globals/testHelpers/createDirectLineEmulator.js
index 51d715c831..0120f0ee9d 100644
--- a/packages/test/page-object/src/globals/testHelpers/createDirectLineEmulator.js
+++ b/packages/test/page-object/src/globals/testHelpers/createDirectLineEmulator.js
@@ -15,17 +15,20 @@ function uniqueId() {
   return random().toString(36).substring(2, 7);
 }
 
-export default function createDirectLineEmulator(store) {
+export default function createDirectLineEmulator(store, { autoConnect = true } = {}) {
   if (!store) {
     throw new Error('"store" argument must be provided when calling createDirectLineEmulator().');
   }
 
   const now = Date.now();
+  const connectedDeferred = createDeferred();
   const connectionStatusDeferredObservable = createDeferredObservable(() => {
     connectionStatusDeferredObservable.next(0);
   });
-  const activityDeferredObservable = createDeferredObservable(() => {
+  const activityDeferredObservable = createDeferredObservable(async () => {
     connectionStatusDeferredObservable.next(1);
+
+    await connectedDeferred.promise;
     connectionStatusDeferredObservable.next(2);
   });
 
@@ -47,6 +50,8 @@ export default function createDirectLineEmulator(store) {
     });
   };
 
+  autoConnect && connectedDeferred.resolve();
+
   return {
     activity$: shareObservable(activityDeferredObservable.observable),
     connectionStatus$: shareObservable(connectionStatusDeferredObservable.observable),
@@ -54,6 +59,7 @@ export default function createDirectLineEmulator(store) {
       // This is a mock and will no-op on dispatch().
     },
     postActivity,
+    emulateConnected: connectedDeferred.resolve,
     emulateIncomingActivity: async activity => {
       if (typeof activity === 'string') {
         activity = {