Merge pull request #331 from imgiseverything/a11y/add-semantics-to-in…

…put-button Accessibility: Add semantics to textInput
OvidijusParsiunas · Jan 13, 2025 · e5dcd44 · e5dcd44
2 parents c8962ce + 0d938d7
commit e5dcd44
Showing 1 changed file with 4 additions and 0 deletions.
diff --git 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() {