From 0d938d72a0d9bf155cad6e8542e958f3044a102d Mon Sep 17 00:00:00 2001
From: Phil Thompson <=>
Date: Mon, 13 Jan 2025 10:15:34 +0000
Subject: [PATCH] Accessibility: Add semantics to textInput

1. Adds role of textbox to textInput so screen-readers are told it is a text input
~2. Adds tabindex="0" to textInput so keyboard users can tab to it~
3. Adds aria-label to textInput so screen-reader users know what it does

All the above are because of limitations with being unable to add an `input` element and/or a `label`.

https://github.com/OvidijusParsiunas/deep-chat/issues/285
---
 component/src/views/chat/input/textInput/textInput.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/component/src/views/chat/input/textInput/textInput.ts b/component/src/views/chat/input/textInput/textInput.ts
index c7bb29e99..329ddb617 100644
--- a/component/src/views/chat/input/textInput/textInput.ts
+++ b/component/src/views/chat/input/textInput/textInput.ts
@@ -73,12 +73,15 @@ export class TextInputEl {
     const inputElement = document.createElement('div');
     inputElement.id = TextInputEl.TEXT_INPUT_ID;
     inputElement.classList.add('text-input-styling');
+    inputElement.role = 'textbox';
     if (Browser.IS_CHROMIUM) TextInputEl.preventAutomaticScrollUpOnNewLine(inputElement);
     if (typeof this._config.disabled === 'boolean' && this._config.disabled === true) {
       inputElement.contentEditable = 'false';
       inputElement.classList.add('text-input-disabled');
+      inputElement.setAttribute('aria-disabled', 'true');
     } else {
       inputElement.contentEditable = 'true';
+      inputElement.removeAttribute('aria-disabled');
       this.addEventListeners(inputElement);
     }
     Object.assign(inputElement.style, this._config.styles?.text);
@@ -127,6 +130,7 @@ export class TextInputEl {
 
   private setPlaceholderText(text: string) {
     this.inputElementRef.setAttribute('deep-chat-placeholder-text', text);
+    this.inputElementRef.setAttribute('aria-label', text);
   }
 
   public isTextInputEmpty() {