react-bootstrap icon indicating copy to clipboard operation
react-bootstrap copied to clipboard

Bug aria-labelledby property is not currently supported to be added to progressbar component

Open jsdev opened this issue 1 year ago • 2 comments

Prerequisites

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

Screenshot 2023-12-14 at 1 50 44 PM

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

jsdev avatar Dec 14 '23 18:12 jsdev

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

Screenshot 2023-12-14 at 3 17 31 PM

jsdev avatar Dec 14 '23 20:12 jsdev