react-bootstrap
react-bootstrap copied to clipboard
Bug aria-labelledby property is not currently supported to be added to progressbar component
Prerequisites
- [X] I am using the correct version of React-Bootstrap for my version of Bootstrap
- [X] I have searched for duplicate or closed issues
- [X] I have read the contributing guidelines
Describe the bug
progress bar fail to be labeled by assistive technology
ariaLabel and ariaLabelledby should be supported accessibility props that can be passed down to the child progressbar that has an aria-value so assistive technology knows context of progressbar
I have included a link: of what should be possible to render:
https://codepen.io/jsdev/full/YzBoyqL
Expected behavior
https://codepen.io/jsdev/full/YzBoyqL
you can see progressbar can be labelled by a heading above, doesn't have to be a heading this is an example of what should be possible and is not.
currently label only inserted as a text node, that is not translated to assistive technology as an accessible-name for the progress bar
To Reproduce
https://react-bootstrap.netlify.app/docs/components/progress
it's pervasive it's never been supported.
I have a PR and will link to this issue
Reproducible Example
https://react-bootstrap.netlify.app/docs/components/progress
Screenshots
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Chrome
What version of React-Bootstrap are you using?
5
What version of Bootstrap are you using?
5.1.3
Additional context
No response
https://codesandbox.io/p/sandbox/focused-cdn-c585fv?file=%2Fsrc%2FDemo.tsx%3A39%2C8
here is an example of competing react component library that allows aria-label and aria-labelledby correctly.
this can be solved multiple ways can lock down the props and or just pass props down to child progressbar component instead of progressbar wrapper component