diff --git a/component/src/views/chat/input/buttons/camera/cameraButton.ts b/component/src/views/chat/input/buttons/camera/cameraButton.ts index bbbb923aa..4ccc4e220 100644 --- 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 { 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 index 19644f784..ad2b770e3 100644 --- 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 index af320b564..aee95663a 100644 --- 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 { 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 index e9066b12c..188659ae2 100644 --- 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 { 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 { 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 { 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 { 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 { 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 index 647b00a3f..0231ee622 100644 --- 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 { 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; }