feature(themes): BCTHEME-76 Carousel bullets should be buttons (paging func update) #1727
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
@BC-tymurbiedukhin @junedkazi @bc-alexsaiannyi
I added buttons in dots list of slick-carousel. As I understood from library code we can not use dots not in the
tag. In screenshots I added the proof of it -
tag is hardcoded in function where dots are creating. But as I understand from slick demos this is not a problem to create accessible dots. Now buttons in dots list can be used for sliding carousel. Buttons have no visual focus now - it will be implemented in one of the next tasks.
Also I turned off accessibility of slick, because current version of the library has a bug with setting tabindex="-1" for all inactive bullets. So you can not use tabbing to jump from one bullet to other. Also by default slick adds role="tabs" for bullets container which is not correct. Because of this bugging behaviour it is better to turn off slick's accessibility and make it by our own. So I added function that controls tabindex of slides (0 for active slide and -1 for other). And dot buttons now have default semantic behaviour as we need
Tickets / Documentation
Ticket
Screenshots (if appropriate)
slick
tag hardcoded for dots
current dot button with wrong role and tabindex
new button that has correct aria role and tabindex by default