Feature/improve accessibility

[SeanTolstoyevski]

Hi all,

I made a few accessibility developments for Chatbox, I corrected some problems.

I am a blind software developer. I hope not to break something about visuality, but I think some of them will have side effects.
If there is a problem with visuality (CSS, etc.), please tell me the points I need to correct. Owners can also directly edit Branch.

My specialty is not Javascript or Typescript (i am backend developer); Working on it was the Great Challenge for me. Practices that I do not comply with, etc. If so, please warn me again.

I also hope you will to apply the relevant changes for the Closed-Source side. It is a great software and it is very hard to use for blind users.
It would be great to use it comfortably.

Description

This PR focuses on enhancing the accessibility of the chatbox by adding ARIA labels, roles and other accessibility-related attributes to improve the experience for users relying on screen readers and other assistive technologies.

Key Changes

1. Sidebar Accessibility

   • Added aria-label to IconButton components for "New Chat," "My Copilots," "Settings," and "About" to provide clear descriptions for screen readers.

2. Header Accessibility

   • Added role="main" and aria-label to the header to indicate the main content area and provide context about the current session.

3. InputBox Accessibility

   • Added role="region" and aria-label to the input area for better screen reader navigation.
   • Added ariaLabel and ariaHidden attributes to buttons for clearer interaction descriptions.

4. Markdown Component Accessibility

   • Replaced the ContentCopyIcon with a button element for the copy functionality, adding an aria-label for better accessibility.

5. Message Component Accessibility

   • Added role="button" to the expand/collapse toggle for better screen reader interaction.
   • Introduced a senderName function to provide clear sender identification for screen readers with rendering header.

6. MiniButton Component Accessibility

   • Added ariaLabel and ariaHidden props to improve button descriptions and visibility for assistive technologies.

7. Toolbar Accessibility

   • Updated the aria-label for the "More Menu" button to be more descriptive.

Why These Changes Matter

These updates ensure that the application is more inclusive and usable for all users, including those who rely on assistive technologies. By adding proper ARIA labels, roles and other attributes, we make the interface more navigable and understandable for everyone.

Testing

• Tested with screen readers with NVDA to ensure proper narration of buttons and interactive elements.
• Verified that all new attributes do not break existing functionality.

Additional Notes

• Relevant developments should also be done for Closed-Source.

• If the heading in the message list badly affects the design, please consider hiding from Screen Readers (CSS sr-only) instead of removing it.
  It is very difficult to wander between the current design and messages.

• Although some "Aria" studies have been done, they were not rendered to HTML (eg buttons in the input box component), I fixed them.

• Since accessibility is not just a labeling, I tried to sem the page. I hope this will not be a problem. If there is a problem, I would like you to think about the idea of sr-only.

• Finally, since I am blind, please send your visual revives by sharing the relevant CSS Snippets. It is not possible to write CSS for me.

Thanks for this great project.

Screenshots

:(

Contributor Agreement

By submitting this Pull Request, I confirm that I have read and agree to the following terms:

• I agree to contribute all code submitted in this PR to the open-source community edition licensed under GPLv3 and the proprietary official edition without compensation.
• I grant the official edition development team the rights to freely use, modify, and distribute this code, including for commercial purposes.
• I confirm that this code is my original work, or I have obtained the appropriate authorization from the copyright holder to submit this code under these terms.
• I understand that the submitted code will be publicly released under the GPLv3 license, and may also be used in the proprietary official edition.

Please check the box below to confirm:

[x] I have read and agree with the above statement.