[WC-2942]: Fix carousel focus indicator #1969
Conversation
|
|
||
| .swiper-button-next:focus, | ||
| .swiper-button-prev:focus { | ||
| outline: 2px solid #264ae5; |
There was a problem hiding this comment.
is there a css variables for this?
i think it should be var(--focus-outline)
| .swiper-button-next:focus, | ||
| .swiper-button-prev:focus { | ||
| outline: 2px solid #264ae5; | ||
| outline-offset: 2px; |
There was a problem hiding this comment.
var(--focus-outline-offset)
| --swiper-navigation-size: 24px; | ||
| border-radius: 50%; | ||
| background-color: rgba(245, 245, 245, 0.7); | ||
| padding: 2em; |
There was a problem hiding this comment.
can we use spacing small, large, or medium?
| .swiper-button-prev { | ||
| --swiper-navigation-size: 24px; | ||
| border-radius: 50%; | ||
| background-color: rgba(245, 245, 245, 0.7); |
There was a problem hiding this comment.
Sure, but why that specifically?
There was a problem hiding this comment.
This one is not specific to that. Maybe other color that is similar and currently available.
There was a problem hiding this comment.
I used --gray-200 since that gave the right amount of color contrast
| .swiper-button-next:focus, | ||
| .swiper-button-prev:focus { | ||
| outline: var(--focus-outline); | ||
| outline-offset: var(--focus-outline-offset); |
There was a problem hiding this comment.
you have to had fallback value... sass variables still needs to be defined.
otherwise, this will not work in atlas 3 with sass variables.
Pull request type
Bug fix (non-breaking change which fixes an issue)
Description
Added focus indicators to the navigation buttons in the carousel, disabled autoplay by default since it's not accessible.
What should be covered while testing?