Allow Aria Label Configurability to improve Accessibility #1994
Comments
|
@dimercurio thank you for raising the request. Similar request came with #1931 . We realize the space for improvement. Another way how the labels could be customizable would be through i18n. I believe that would be even a cleaner solution. What do you think? |
|
Yes I believe that would be an even better solution for situations like this where aria-labels need to be customized per translation. Perhaps this could be something Stream supports by default. Something else we've come across is we've needed the ability to set
The reason I suggest having some sort of a configuration object designated for aria attributes is because it would allow developers to have total control of the properties they want and what their values should be. All we would need from Stream's side is an update to these elements to allow for the spreading of these properties to these parent elements, such as the 'emoji picker' button. On our end we'd determine if emojiPickerIsOpen and set that aria-expanded to true, as well as set the aria-label ourselves. |
MartinCupela
added
the
cluster:a11y
## [11.9.0](v11.8.0...v11.9.0) (2024-02-21) ### Bug Fixes * add aria-expanded attribute to emoji picker and reactions selector ([#2274](#2274)) ([b15cdd5](b15cdd5)) * mark channel read on scroll to bottom of the main message list ([#2283](#2283)) ([d04d0ab](d04d0ab)) * prevent layout shifts in reactions modal ([#2272](#2272)) ([706cf3d](706cf3d)) * trap focus in opened modal ([#2278](#2278)) ([8f48b52](8f48b52)) ### Features * make aria-labels localizable ([#2282](#2282)) ([7867677](7867677)), closes [#1931](#1931) [#1994](#1994)
|
🎉 This issue has been resolved in version 11.9.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Motivation
With accessibility being more of a focus lately, we have been looking to improve areas that are within our control in regards to GetStream. We have noticed there are a few concerns we'd like to address that are currently out of our hands as GetStream is hard-coding values/not allowing configurability in some of these areas.
One thing we find ourselves needing to do is set the
aria-labelfor things such as the Emoji and Upload buttons. Although you are able to define custom components for these icons, the parent contains hard-coded labels that can only be addressed by creating an entirely new MessageInput component.Proposed solution
This could just be an object that is taken in as a prop into Channel, with each key representing the label value you'd like to overwrite (ex. emojiPickerAriaLabel). This would allow us to define custom aria labels depending on user locale.
Acceptance Criteria
Please allow for configurability of the aria-labels for the controls/icons within the MessageInput.
The text was updated successfully, but these errors were encountered: