Conversation
| <div class="progress-bar bg-success"></div> | ||
| </div> | ||
| <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> | ||
| <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="30" style="width: 20%"> |
There was a problem hiding this comment.
Those values could also be 15, 30, 55 or whatever but the sum should be 100 since the aria-valuenow equals the width percentage.
There was a problem hiding this comment.
reminded of this discussion from the past #32973 (comment)
tl;dr: there's no real concept of interdependent progress bars that together form part of a whole in ARIA, and it depends really how an author is using these (either as literally a visual smushing together of various progress bars that go from 0-100%, or segments of something that totals 100% ... both of which I could envisage as fine in certain circumstances)
There was a problem hiding this comment.
Oh yeah I haven't made enough searchs to find this! Thanks a lot to pin this PR. I better understand the context and the actual implementation, reverting this for sure.
| Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them. | ||
|
|
||
| - We use the `.progress` as a wrapper to indicate the max value of the progress bar. | ||
| - The `.progress` wrapper also requires a `role="progress"` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar). |
|
personally, i'm ok with all changes except for the valuemax changes (unless we expand this much further to explain the two possible ways to look at these stacked progress bars, e.g. three separate bars that go 0-100% but that have been visually smushed together, OR separate segments that form part of a whole) |
|
party time 🥳 |
4 participants
Description
Tweak a bit the wording and remove some space.
Proposal to use aria-valuemax better inside multiple bars.
Motivation & Context
Better logic for documentation.
Type of changes
Checklist
npm run lint)Live previews
Related issues
NA