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:

deep-chat/component/src/views/chat/input/buttons/customButtonInnerElements.ts

Line 6 in 6f2f4ab

const textElement = document.createElement('div');

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!

[imgiseverything]

@OvidijusParsiunas Thank you for the update.

I believe, adding tabindex="0" to the button (or div) won't affect it's tab order it will merely allow it to be tabbed to so it should be safe. Adding a number greater than 0 is discouraged by 0 itself should be fine to stay on multiple elements.

[imgiseverything]

@OvidijusParsiunas I read your update that you are busy relocating so I thought maybe I could help with an update here for you?

I have pulled the repository and made the changes locally, I'd be happy to share the changes. What do you think?

[OvidijusParsiunas]

Hey @imgiseverything.
Apologies for not getting to the issue earlier, the lack of free time and development of other features has definitely delayed a lot of the progress.

If you have the changes done that's great! You can definitely raise a PR! Just note that I am a very picky reviewer so I may request some changes to maintain our standards and consistency 😉

Thankyou for all your help!

[imgiseverything]

@OvidijusParsiunas Sure, I'd love to open a PR. I can't push to this repository because I do not have. Could I send you the code some other way?

[OvidijusParsiunas]

Hey, I recommend forking this repository and then create a PR that way.