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:

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.