Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix: navigate through Mini Cart contents with keyboard (https://github.com/woocommerce/woocommerce-blocks/pull/6731) 

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
This commit is contained in:
Tung Du 2022-07-25 12:39:47 +07:00 committed by GitHub
parent 91e498c28a
commit c10e91e7e1
4 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
plugins/woocommerce-blocks/assets/js/base/components/button/style.scss
View File

@ -57,9 +57,12 @@
&.outlined {
background-color: transparent;
box-shadow: inset 0 0 0 1px $gray-900;
color: $gray-900;
&:not(:focus) {
box-shadow: inset 0 0 0 1px $gray-900;
}
&:disabled,
&:hover,
&:focus,

5
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-items-block/frontend.tsx
View File

@ -13,7 +13,10 @@ const Block = ( {
className,
}: MiniCartItemsBlockProps ): JSX.Element => {
return (
<div className={ classNames( className, 'wc-block-mini-cart__items' ) }>
<div
className={ classNames( className, 'wc-block-mini-cart__items' ) }
tabIndex={ -1 }
>
{ children }
</div>
);

24
plugins/woocommerce-blocks/assets/js/blocks/mini-cart/style.scss
View File

@ -142,22 +142,28 @@ h2.wc-block-mini-cart__title {
display: flex;
gap: $gap;
.wc-block-mini-cart__footer-cart.wc-block-components-button {
box-shadow: inset 0 0 0 1px currentColor;
color: currentColor;
display: none;
.wc-block-components-button {
flex-grow: 1;
font-weight: 600;
}
.wc-block-components-button.outlined {
color: currentColor;
display: none;
&:not(:focus) {
box-shadow: inset 0 0 0 1px currentColor;
}
&:hover,
&:focus {
color: $white;
}
@media only screen and (min-width: 480px) {
display: inline-flex;
}
}
.wc-block-mini-cart__footer-checkout {
flex-grow: 1;
font-weight: 600;
}
}
.wc-block-components-payment-method-icons {

4
plugins/woocommerce-blocks/src/BlockTypes/MiniCartContents.php
View File

@ -92,8 +92,8 @@ class MiniCartContents extends AbstractBlock {
'.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout',
'.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout:hover',
'.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout:focus',
'.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart:hover',
'.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart:focus',
'.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart.wc-block-components-button:hover',
'.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart.wc-block-components-button:focus',
'.wc-block-mini-cart__shopping-button a:hover',
'.wc-block-mini-cart__shopping-button a:focus',
),