From c0168c72aac265ff04d84efde9ecbaa587868612 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Fri, 27 Sep 2024 17:05:57 +0200
Subject: [PATCH] feat(chat): Add textarea aria

---
 .../devextreme/js/__internal/ui/chat/chat.ts  |  8 +--
 .../js/__internal/ui/chat/messagebox.ts       |  7 ++-
 .../chatParts/chat.markup.tests.js            | 51 +++++++++++++++++++
 3 files changed, 60 insertions(+), 6 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
index 41de283bd62a..917ce07eee2b 100644
--- a/packages/devextreme/js/__internal/ui/chat/chat.ts
+++ b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -63,7 +63,7 @@ class Chat extends Widget<Properties> {
     this._renderMessageBox();
 
     this._updateRootAria();
-    this._updateTextAreaAria();
+    this._updateMessageBoxAria();
   }
 
   _renderHeader(title: string): void {
@@ -121,11 +121,11 @@ class Chat extends Widget<Properties> {
     this.setAria(aria, this.$element());
   }
 
-  _updateTextAreaAria(): void {
+  _updateMessageBoxAria(): void {
     const $emptyView = this._messageList.$element().find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`);
     const emptyViewId = $emptyView?.attr('id') ?? null;
 
-    this._messageBox._updateTextAreaAria(emptyViewId);
+    this._messageBox._updateAria(emptyViewId);
   }
 
   _createMessageSendAction(): void {
@@ -186,7 +186,7 @@ class Chat extends Widget<Properties> {
       case 'items':
       case 'dataSource':
         this._messageList.option(name, value);
-        this._updateTextAreaAria();
+        this._updateMessageBoxAria();
         break;
       case 'onMessageSend':
         this._createMessageSendAction();
diff --git a/packages/devextreme/js/__internal/ui/chat/messagebox.ts b/packages/devextreme/js/__internal/ui/chat/messagebox.ts
index 91d5cf2b5074..f0b3ec4c61fa 100644
--- a/packages/devextreme/js/__internal/ui/chat/messagebox.ts
+++ b/packages/devextreme/js/__internal/ui/chat/messagebox.ts
@@ -13,6 +13,7 @@ import TextArea from '../m_text_area';
 const CHAT_MESSAGEBOX_CLASS = 'dx-chat-messagebox';
 const CHAT_MESSAGEBOX_TEXTAREA_CLASS = 'dx-chat-messagebox-textarea';
 const CHAT_MESSAGEBOX_BUTTON_CLASS = 'dx-chat-messagebox-button';
+const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
 export type MessageSendEvent =
   NativeEventInfo<MessageBox, KeyboardEvent | PointerEvent | MouseEvent | TouchEvent> &
@@ -148,8 +149,10 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
     this._button.option('disabled', state);
   }
 
-  _updateTextAreaAria(value: string | null): void {
-    $(this._textArea.$element()).attr('aria-describedby', value);
+  _updateAria(value: string | null): void {
+    $(this._textArea.$element())
+      .find(`.${TEXTEDITOR_INPUT_CLASS}`)
+      .attr('aria-describedby', value);
   }
 
   _isValuableTextEntered(): boolean {
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js
index 6972caecb4be..afd3d457a4ad 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js
@@ -6,6 +6,8 @@ const CHAT_CLASS = 'dx-chat';
 const CHAT_HEADER_CLASS = 'dx-chat-header';
 const CHAT_MESSAGEBOX_CLASS = 'dx-chat-messagebox';
 const CHAT_MESSAGELIST_CLASS = 'dx-chat-messagelist';
+const CHAT_MESSAGELIST_EMPTY_VIEW_CLASS = 'dx-chat-messagelist-empty-view';
+const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
 const moduleConfig = {
     beforeEach: function() {
@@ -103,6 +105,55 @@ QUnit.module('Chat', moduleConfig, () => {
                 assert.strictEqual(this.$element.attr(attribute), expectedValue);
             });
         });
+
+        QUnit.test('textarea should not have aria-describedby attribute if there are items', function(assert) {
+            this.reinit({
+                items: [
+                    { text: '1' },
+                    { text: '2' },
+                ],
+            });
+
+            const $textArea = this.$element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
+
+            assert.strictEqual($textArea.attr('aria-describedby'), undefined);
+        });
+
+        QUnit.test('textarea should have correct aria-describedby attribute if there are not items', function(assert) {
+            const $textArea = this.$element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
+            const $emptyView = this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`);
+
+            assert.strictEqual($textArea.attr('aria-describedby'), $emptyView.attr('id'));
+        });
+
+        QUnit.test('textarea should get rid of aria-describedby attribute if items has been added in runtime', function(assert) {
+            this.instance.option({
+                items: [
+                    { text: '1' },
+                    { text: '2' },
+                ],
+            });
+
+            const $textArea = this.$element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
+
+            assert.strictEqual($textArea.attr('aria-describedby'), undefined);
+        });
+
+        QUnit.test('textarea should get aria-describedby attribute if items has been removed in runtime', function(assert) {
+            this.reinit({
+                items: [
+                    { text: '1' },
+                    { text: '2' },
+                ],
+            });
+
+            this.instance.option({ items: [] });
+
+            const $textArea = this.$element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
+            const $emptyView = this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`);
+
+            assert.strictEqual($textArea.attr('aria-describedby'), $emptyView.attr('id'));
+        });
     });
 });