Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Zero-width/zero-value progress bars not announced consistently by browser/assistive technology combinations #36736

Closed
3 tasks done
patrickhlauke opened this issue Jul 14, 2022 · 0 comments · Fixed by #36831
Closed
3 tasks done

Zero-width/zero-value progress bars not announced consistently by browser/assistive technology combinations #36736

patrickhlauke opened this issue Jul 14, 2022 · 0 comments · Fixed by #36831
Assignees
@patrickhlauke
Labels
accessibility v5

Comments

@patrickhlauke
Copy link
Member

patrickhlauke commented Jul 14, 2022 •
edited

Prerequisites

Describe the issue

Due to screen reader heuristics (see nvaccess/nvda#13897 (comment)) the zero width/zero value progress bar is not being announced consistently. https://getbootstrap.com/docs/5.2/components/progress/#how-it-works

Browser/AT combinations that do announce the zero-width progress bar:

  • Chrome+JAWS
  • Firefox+JAWS
  • Safari+VoiceOver/macOS
  • Chrome+VoiceOver/macOS
  • Firefox+VoiceOver/macOS (though it's broken in other ways in general, not announcing value)
  • Chrome+Talkback/Android

Browser/AT combinations that don't announce the zero-width progress bar:

  • Chrome+NVDA
  • Firefox+NVDA
  • Safari+VoiceOver/iOS

Video recording of the Chrome+NVDA - note how the first progress bar is completely skipped

progress-nvda.mp4

Will need some exploration, but to work around the issue of "not rendered" (zero width) elements being ignored by some of the AT heuristics, it may be necessary to shift the various aria- attributes to the container element, rather than the element that acts as the visual bar itself.

i.e. changing

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="..." aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

to

<div class="progress" role="progressbar" aria-label="..." aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar"></div>
</div>

or even something using a generated pseudo-element to be the "actual" visual bar.

obviously the approach of loading all aria- into the parent won't work for the current multi-bar thing https://getbootstrap.com/docs/5.2/components/progress/#multiple-bars ... so perhaps the pseudo-element way is the way to go...

Reduced test cases

https://getbootstrap.com/docs/5.2/components/progress/#how-it-works

What operating system(s) are you seeing the problem on?

Windows, macOS, Android, iOS

What browser(s) are you seeing the problem on?

No response

What version of Bootstrap are you using?

5.2
@patrickhlauke patrickhlauke changed the title Rework progress bar structure Zero-width/zero-value progress bars not announced consistently by browser/assistive technology combinations Jul 14, 2022
@patrickhlauke patrickhlauke self-assigned this Jul 14, 2022
@patrickhlauke patrickhlauke mentioned this issue Jul 14, 2022
Closed
patrickhlauke added a commit that referenced this issue Jul 24, 2022
@patrickhlauke
Rework progress bar markup and styles
8dbd246 
Logically moves the various `role` and `aria-` attributes to the `.progress` element itself, leaving the `.progress-bar` to be used purely for the visual presentation. This fixes the problem #36736 that in certain browser/AT combinations, zero-value/zero-width progress bars are completely ignored and not announced.

For multiple/stacked progress bars, this PR introduces a new wrapper and class `.progress-stacked`, to accommodate for the fact that with the more logical structure above, we need full `.progress` elements with child `.progress-bar` elements, and can't get away with the fudge we had before of having a single `.progress` with multiple `.progress-bar`s.

Note that the old markup structures still work with this change, so this could be considered a non-breaking change - though one we definitely want to highlight as it's more accessible (as it now guarantees that zero-value/zero-width progress bars, whether on their own or as part of a multi/stacked bar, are actually announced)
@patrickhlauke patrickhlauke mentioned this issue Jul 24, 2022
Merged
mdo added a commit that referenced this issue Nov 29, 2022
@patrickhlauke @julien-deramond @mdo
Rework progress bar markup and styles (#36831)
26a3ef1 
* Rework progress bar markup and styles

Logically moves the various `role` and `aria-` attributes to the `.progress` element itself, leaving the `.progress-bar` to be used purely for the visual presentation. This fixes the problem #36736 that in certain browser/AT combinations, zero-value/zero-width progress bars are completely ignored and not announced.

For multiple/stacked progress bars, this PR introduces a new wrapper and class `.progress-stacked`, to accommodate for the fact that with the more logical structure above, we need full `.progress` elements with child `.progress-bar` elements, and can't get away with the fudge we had before of having a single `.progress` with multiple `.progress-bar`s.

Note that the old markup structures still work with this change, so this could be considered a non-breaking change - though one we definitely want to highlight as it's more accessible (as it now guarantees that zero-value/zero-width progress bars, whether on their own or as part of a multi/stacked bar, are actually announced)

* Add a note about progress bar change in migration guide

* Add notes with old markup examples and explanation

* Fix bundlewatch

* Update site/content/docs/5.2/components/progress.md

Co-authored-by: Julien Déramond <julien.deramond@orange.com>

* Reintroduce deleted styles

Turns out they're needed for correct positioning of text inside progress bar

* Move changes in markup to Migrationg guide, link to that from top of progress page, rewrite some content

* Fix typo in callout

* Clarify "Sizing" section

* Remove redundant "now"

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@patrickhlauke patrickhlauke

Labels
accessibility v5
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Rework progress bar markup and styles twbs/bootstrap
1 participant
@patrickhlauke