Accessibility: The `textInput` component is a div but it should be an `input`

[imgiseverything]

In order for people within the EU (European Union) (or supplying services to the EU) they will need to comply with the European Accessibility Act and this library has a few issues currently with its compliance:

input semantics

The textInput component has been coded as a div with contentEditable set to true. I am not sure of the design decision behind this but it would be better if the component was an input with a type="text" attribute/value.

Source: https://github.com/OvidijusParsiunas/deep-chat/blob/6f2f4ab88133d54b54819dba1f016261d232e3c2/component/src/views/chat/input/textInput/textInput.ts#L44

This would allow keyboard users to easily tab to the field and a screen-reader user would be informed that it is a 'textbox'

If that is too tricky, an alternative would be to add the role of textbox to the element e.g.

inputElement.role = 'textbox';
inputElement.tabIndex = 0;

This would tell a screen-reader user that the div is being treated as an input, semantically it would become an input and tabindex="0" would allow a user to tab to the element.

Marking the input as disabled

Also instead of inputElement.classList.add('text-input-disabled'); this could have inputElement.setAttribute('aria-disabled', 'true') to tell the screen-reader when the input is disabled as the class .text-input-disabled does not convey this semantically.

Labeling the input

If the above code change is done then the screen-reader user will know the input is a textbox but adding an aria-label to the input (or div role="textbox" if you choose to do that) would help the screen-reader user know what the textbox is asking of them.

private setPlaceholderText(text: string) {
  this.inputElementRef.setAttribute('deep-chat-placeholder-text', text);
  this.inputElementRef.setAttribute('aria-label', text);
}

The above code change could work well, and while it is not ideal to have an aria-label and a placeholder that are the same it could improve the accessibility slightly for occasions when the textbox is not empty and the placeholder is not visible without incurring any visual changes.

[OvidijusParsiunas]

Hi @imgiseverything. Thankyou for your UX advice. The core reason why I did not use an input element type for text input and chose a contenteditable div is to allow the input area to automatically expand in height and also have an overflow scrollbar. This is something that is not available with the input element. Additionally, the most popular LLM UIs such as ChatGPT and Gemini also use contenteditable divs for this reason.

I will instead attempt to add the attributes that you have described. Thanks! (I have a backlog of current work, but will get to this ASAP!)

[OvidijusParsiunas]

Thankyou for your PR. I will close this issue when the changes have made it to the core packages, which should be early next month as there are quite a few new features that will be added with it.

[OvidijusParsiunas]

This is now available in deep-chat and deep-chat-react version 2.2.0. Thankyou for all your help once again!