Make carousel indicators actual buttons by patrickhlauke · Pull Request #32661 · twbs/bootstrap

patrickhlauke · 2021-01-03T11:11:05Z

Currently, the carousel indicators are not conveyed at all to assistive technologies, and they can only be operated using the mouse.

This change generalises some of the stylings and JS to be backwards-compatible (meaning it's non-breaking), but caters for a more correct structure where the indicators are actual button elements (thus keyboard-focusable/operable), and where the currently active indicator is conveyed with aria-current

Preview: https://deploy-preview-32661--twbs-bootstrap.netlify.app/docs/5.0/components/carousel/#with-indicators

patrickhlauke · 2021-01-03T12:29:30Z

This relies on #32631 being merged to remove the overridden focus indicator for the button in reboot

ffoodd

LGTM, this is really needed.

~~I only wonder if we shouldn't introduce anew class name for single indicator (eg .carousel-indicator) instead of relying on data- attribute?~~
Edit: would be a breaking change.

patrickhlauke · 2021-01-04T09:24:49Z

Edit: would be a breaking change.

yup, exactly. i see this as a first step, then we can make it a breaking change next time to offer more styling flexibility

patrickhlauke · 2021-01-17T12:22:09Z

@mdo good to merge?

XhmikosR · 2021-01-17T12:23:28Z

Nope. These are added to beta3.

…

On Sun, Jan 17, 2021, 14:22 Patrick H. Lauke ***@***.***> wrote: @mdo <https://github.com/mdo> good to merge? — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#32661 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACVLNNI4O5GB7R3J3XGAULS2LJADANCNFSM4VRZCBLA> .

patrickhlauke · 2021-01-27T14:09:43Z

Wondering if this could/should be backported to v4 as well (since we're going to backport #32627 which is similar/related)

XhmikosR · 2021-01-27T14:19:03Z

Not sure about the backports, I'm waiting for @mdo decide about this and #32627 backports.

mdo · 2021-01-27T21:34:17Z

I'm in favor of backporting if it's straightforward and provides a boost to folks and accessibility :).

XhmikosR · 2021-01-28T09:54:08Z

So, about the JS part. Before, we were only looping once. Now we loop twice. Why can't we use children() like before? Also, I don't get how more than one active indicators can be present?

patrickhlauke · 2021-01-28T20:03:27Z

Why can't we use children() like before

because it's not guaranteed that they're immediate children. before, with our structure, it was just a list, and the indicators were the immediate <li> elements. now, you may be using one container for all the indicators, and then have a few more structures in between, and only then the links or buttons of whatever you're using.

i.e. I could decide that yes, I still want an ordered list structure, so end up with

<ol class="carousel-indicators">
  <li ...><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1"></button></li>
  ...
</ol>

or whatever.

XhmikosR · 2021-01-28T20:05:08Z

How about closest then?

…

On Thu, Jan 28, 2021, 22:03 Patrick H. Lauke ***@***.***> wrote: Why can't we use children() like before because it's not guaranteed that they're immediate children. before, with our structure, it was just a list, and the indicators were the immediate <li> elements. now, you may be using one container for all the indicators, and then have a few more structures in between, and only *then* the links or buttons of whatever you're using. — You are receiving this because your review was requested. Reply to this email directly, view it on GitHub <#32661 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACVLNNCIFWGYFIBEY5ITZLS4G7KHANCNFSM4VRZCBLA> .

XhmikosR · 2021-01-28T20:06:19Z

NVM, that probably wouldn't work either. I guess the current solution is as good as it gets, then. I'll review tomorrow and merge it.

…

On Thu, Jan 28, 2021, 22:04 XhmikosR ***@***.***> wrote: How about closest then? On Thu, Jan 28, 2021, 22:03 Patrick H. Lauke ***@***.***> wrote: > Why can't we use children() like before > > because it's not guaranteed that they're immediate children. before, with > our structure, it was just a list, and the indicators were the immediate > <li> elements. now, you may be using one container for all the > indicators, and then have a few more structures in between, and only > *then* the links or buttons of whatever you're using. > > — > You are receiving this because your review was requested. > Reply to this email directly, view it on GitHub > <#32661 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AACVLNNCIFWGYFIBEY5ITZLS4G7KHANCNFSM4VRZCBLA> > . >

patrickhlauke · 2021-01-28T20:10:33Z

I don't get how more than one active indicators can be present?

I don't think my code looks for more than one? I do findOne to get the current active indicator and then remove its class and aria-current, and then i loop through all indicators, but as soon as i find one that has the right data-bs-slide-to i set class/aria-current and then break (as suggested by @rohit2sharma95)

Make carousel indicators actual buttons

- In Bootstrap 5 the CSS selector matching indicators has changed and included `data-bs-target` attribute that we were missing - Recommended carousel markup changed from using `ul`, `li` and `a` to using `button` elements - Had to refactor tests as selectors were not precise enough On Bootstrap side see: - twbs/bootstrap#32661 - twbs/bootstrap#32627 Fixes ng-bootstrap#4200 Fixes ng-bootstrap#4253

- In Bootstrap 5 the CSS selector matching indicators has changed and included `data-bs-target` attribute that we were missing - Recommended carousel markup changed from using `ul`, `li` and `a` to using `button` elements - Had to refactor tests as selectors were not precise enough On Bootstrap side see: - twbs/bootstrap#32661 - twbs/bootstrap#32627 Fixes #4200 Fixes #4253

patrickhlauke requested review from a team as code owners January 3, 2021 11:11

patrickhlauke marked this pull request as draft January 3, 2021 11:11

patrickhlauke added v5 v5, the v5-dev branch accessibility Keyboard, screen readers, contrast, ARIA css Sass sources or compiled CSS docs Documentation site and its content js JavaScript or TypeScript sources and plugins labels Jan 3, 2021

patrickhlauke force-pushed the patrickhlauke-carousel-indicators branch 3 times, most recently from e6cf4e8 to dee29d4 Compare January 3, 2021 12:20

patrickhlauke marked this pull request as ready for review January 3, 2021 12:32

This was referenced Jan 3, 2021

Carousel accessibility improvements #31908

Closed

Docs: carousel, collapse, navs (tabs), popovers should use buttons rather than faked link buttons #31186

Closed

ffoodd approved these changes Jan 4, 2021

View reviewed changes

XhmikosR requested review from MartijnCuppens and mdo January 4, 2021 12:23

XhmikosR requested a review from rohit2sharma95 January 17, 2021 12:29

rohit2sharma95 reviewed Jan 17, 2021

View reviewed changes

Comment thread js/src/carousel.js Outdated

Comment thread js/src/carousel.js

XhmikosR marked this pull request as draft January 18, 2021 13:53

patrickhlauke marked this pull request as ready for review January 18, 2021 15:10

rohit2sharma95 approved these changes Jan 19, 2021

View reviewed changes

mdo approved these changes Jan 27, 2021

View reviewed changes

XhmikosR force-pushed the patrickhlauke-carousel-indicators branch from 25246de to 39e3e47 Compare January 28, 2021 09:49

patrickhlauke and others added 2 commits January 28, 2021 11:51

Make carousel indicators actual buttons

f3de29f

Just find the active indicator

be40c85

XhmikosR force-pushed the patrickhlauke-carousel-indicators branch from 39e3e47 to be40c85 Compare January 28, 2021 09:54

Merge branch 'main' into patrickhlauke-carousel-indicators

6c0af73

XhmikosR merged commit e79c8f3 into main Jan 28, 2021

XhmikosR deleted the patrickhlauke-carousel-indicators branch January 28, 2021 21:32

patrickhlauke added the backport-to-v4 Legacy: v4 backports label Feb 11, 2021

patrickhlauke mentioned this pull request Feb 21, 2021

Make carousel indicators actual buttons (backport to v4) #33166

Closed

patrickhlauke added a commit that referenced this pull request Feb 21, 2021

Manual backport of #32661

537b372

XhmikosR pushed a commit that referenced this pull request Mar 11, 2021

Manual backport of #32661

dccbc35

Make carousel indicators actual buttons

XhmikosR pushed a commit that referenced this pull request Oct 8, 2021

Manual backport of #32661

759bc24

Make carousel indicators actual buttons

maxokorokov mentioned this pull request Feb 22, 2022

fix(carousel): fix hidden carousel indicators ng-bootstrap/ng-bootstrap#4259

Merged

mdo mentioned this pull request Jan 4, 2023

There is an unecessary list-type on the .carousel-indicators element #37769

Closed

Conversation

patrickhlauke commented Jan 3, 2021 • edited by XhmikosR Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patrickhlauke commented Jan 3, 2021

Uh oh!

ffoodd left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

patrickhlauke commented Jan 4, 2021

Uh oh!

patrickhlauke commented Jan 17, 2021

Uh oh!

XhmikosR commented Jan 17, 2021 via email

Uh oh!

Uh oh!

Uh oh!

patrickhlauke commented Jan 27, 2021

Uh oh!

XhmikosR commented Jan 27, 2021

Uh oh!

mdo commented Jan 27, 2021

Uh oh!

XhmikosR commented Jan 28, 2021

Uh oh!

patrickhlauke commented Jan 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

XhmikosR commented Jan 28, 2021 via email

Uh oh!

XhmikosR commented Jan 28, 2021 via email

Uh oh!

patrickhlauke commented Jan 28, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

patrickhlauke commented Jan 3, 2021 •

edited by XhmikosR

Loading

ffoodd left a comment •

edited

Loading

patrickhlauke commented Jan 28, 2021 •

edited

Loading