Merge pull request #1 from imgiseverything/a11y/add-semantics-to-inpu…

…t-button A11y/add semantics to input button
OvidijusParsiunas · Dec 16, 2024 · f79de36 · f79de36
2 parents dabfb5d + d2af40c
commit f79de36
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 1 deletion.
diff --git a/component/src/views/chat/input/buttons/camera/cameraButton.ts b/component/src/views/chat/input/buttons/camera/cameraButton.ts
@@ -37,6 +37,8 @@ export class CameraButton extends InputButton<Styles> {
   private static createButtonElement() {
     const buttonElement = document.createElement('div');
     buttonElement.classList.add('input-button');
+    buttonElement.role = 'button';
+    buttonElement.setAttribute('tabindex', '0');
     return buttonElement;
   }
 

diff --git a/component/src/views/chat/input/buttons/inputButton.css b/component/src/views/chat/input/buttons/inputButton.css
@@ -15,7 +15,8 @@
   height: 1.65em;
 }
 
-.input-button:hover {
+.input-button:hover,
+.input-button:focus-visible {
   background-color: #9c9c9c2e;
 }
 

diff --git a/component/src/views/chat/input/buttons/microphone/microphoneButton.ts b/component/src/views/chat/input/buttons/microphone/microphoneButton.ts
@@ -43,6 +43,8 @@ export class MicrophoneButton extends InputButton<Styles> {
     const buttonElement = document.createElement('div');
     buttonElement.id = 'microphone-button';
     buttonElement.classList.add('input-button');
+    buttonElement.role = 'button';
+    buttonElement.setAttribute('tabindex', '0');
     return buttonElement;
   }
 

diff --git a/component/src/views/chat/input/buttons/submit/submitButton.ts b/component/src/views/chat/input/buttons/submit/submitButton.ts
@@ -95,6 +95,8 @@ export class SubmitButton extends InputButton<Styles> {
   private static createButtonContainerElement() {
     const buttonElement = document.createElement('div');
     buttonElement.classList.add('input-button');
+    buttonElement.role = 'button';
+    buttonElement.setAttribute('tabindex', '0');
     return buttonElement;
   }
 
@@ -220,6 +222,8 @@ export class SubmitButton extends InputButton<Styles> {
   private changeToStopIcon() {
     if (this._serviceIO.websocket) return; // stop not used for streaming messages in websocket
     this.elementRef.classList.remove(SubmitButton.LOADING_CLASS, SubmitButton.DISABLED_CLASS, SubmitButton.SUBMIT_CLASS);
+    this.elementRef.removeAttribute('aria-busy');
+    this.elementRef.removeAttribute('aria-disabled');
     this.elementRef.replaceChildren(this._innerElements.stop);
     this.reapplyStateStyle('stop', ['loading', 'submit']);
     this.elementRef.onclick = this.stopStream.bind(this);
@@ -230,7 +234,9 @@ export class SubmitButton extends InputButton<Styles> {
     if (this._serviceIO.websocket) return;
     if (!this._isSVGLoadingIconOverriden) this.elementRef.replaceChildren(this._innerElements.loading);
     this.elementRef.classList.remove(SubmitButton.SUBMIT_CLASS, SubmitButton.DISABLED_CLASS);
+    this.elementRef.removeAttribute('aria-disabled');
     this.elementRef.classList.add(SubmitButton.LOADING_CLASS);
+    this.elementRef.setAttribute('aria-busy', 'true');
     this.reapplyStateStyle('loading', ['submit']);
     this.elementRef.onclick = () => {};
     this.status.requestInProgress = true;
@@ -241,6 +247,8 @@ export class SubmitButton extends InputButton<Styles> {
   public changeToSubmitIcon() {
     if (this.elementRef.classList.contains(SubmitButton.SUBMIT_CLASS)) return;
     this.elementRef.classList.remove(SubmitButton.LOADING_CLASS, SubmitButton.DISABLED_CLASS);
+    this.elementRef.removeAttribute('aria-busy');
+    this.elementRef.removeAttribute('aria-disabled');
     this.elementRef.classList.add(SubmitButton.SUBMIT_CLASS);
     this.elementRef.replaceChildren(this._innerElements.submit);
     SubmitButtonStateStyle.resetSubmit(this, this.status.loadingActive);
@@ -258,7 +266,9 @@ export class SubmitButton extends InputButton<Styles> {
       this.changeToSubmitIcon();
     } else if (!this.elementRef.classList.contains(SubmitButton.DISABLED_CLASS)) {
       this.elementRef.classList.remove(SubmitButton.LOADING_CLASS, SubmitButton.SUBMIT_CLASS);
+      this.elementRef.removeAttribute('aria-busy');
       this.elementRef.classList.add(SubmitButton.DISABLED_CLASS);
+      this.elementRef.setAttribute('aria-disabled', 'true');
       this.elementRef.replaceChildren(this._innerElements.disabled);
       this.reapplyStateStyle('disabled', ['submit']);
       this.elementRef.onclick = () => {};

diff --git a/component/src/views/chat/input/buttons/uploadFile/uploadFileButton.ts b/component/src/views/chat/input/buttons/uploadFile/uploadFileButton.ts
@@ -61,6 +61,8 @@ export class UploadFileButton extends InputButton<Styles> {
   private static createButtonElement() {
     const buttonElement = document.createElement('div');
     buttonElement.classList.add('input-button', 'upload-file-button');
+    buttonElement.role = 'button';
+    buttonElement.setAttribute('tabindex', '0');
     return buttonElement;
   }