feature(themes): BCTHEME-76 Carousel bullets should be buttons (paging func update) #1727
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Autotagging @bigcommerce/storefront-team @davidchin |
yurytut1993
changed the title
…es after tests failed)
…e linter fixes part 2)
…n type button added to dots)
BC-tymurbiedukhin
approved these changes
Jul 17, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
