feat(chat): Add textarea aria

DevExpress · Sep 27, 2024 · c0168c7 · c0168c7
1 parent 832976b
commit c0168c7
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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'));
+        });
     });
 });