Accessibility: Buttons are coded as `div` but should be `button` elements

[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:

Button semantics

The component rendered by CustomButtonInnerElements has been coded as a div. I am not sure of the design decision behind this but it would be better if the component was an button with a type="submit" attribute/value.

Source:

https://github.com/OvidijusParsiunas/deep-chat/blob/6f2f4ab88133d54b54819dba1f016261d232e3c2/component/src/views/chat/input/buttons/customButtonInnerElements.ts#L6

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

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

textElement.role = 'button';
textElement.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.

Note

It's not 100% clear how customButtonInnerElements.ts, button.ts and submitButton.ts work so setting the 'button' to be a button may need to take place ina. different component to 'CustomButtonInnerElements'

[OvidijusParsiunas]

Hi.

The buttons were designed over a year ago, hence I can't remember the exact reason they are divs. However if it is better UX I will consider changing their type. The tabIndex = 0 may be problematic as there can be multiple buttons within the same chat, hence giving them all a tabIndex of 0 would not make sense.

I currently have a significant backlog of work that I need to get through prior to this, but I really appreciate the feedback!