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

Products by Rating: Improve Rating filter accessibility (https://github.com/woocommerce/woocommerce-blocks/pull/7370) 

* Products by Rating: Improve accessibility by announcing rating filter changes

* Products by Rating: Revert dependency bug

* Products by Rating: Update accessibility messages

* Products by Rating: Fix dependency array bug

* Products by Rating: Remove incorrect dependency array
This commit is contained in:
Daniel Dudzic 2022-10-13 15:57:16 +02:00 committed by GitHub
parent c4eea891c9
commit f3037f2007
1 changed files with 45 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
plugins/woocommerce-blocks/assets/js/blocks/rating-filter/block.tsx
View File

@ -1,7 +1,8 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';
import { speak } from '@wordpress/a11y';
import Rating from '@woocommerce/base-components/product-rating';
import { usePrevious, useShallowEqual } from '@woocommerce/base-hooks';
import {
@ -89,8 +90,6 @@ const RatingFilterBlock = ( {
initialFilters
);
const productRatingsArray: string[] = Array.from( productRatings );
/**
* Used to redirect the page when filters are changed so templates using the Classic Template block can filter.
*
@ -201,40 +200,35 @@ const RatingFilterBlock = ( {
.filter(
( item ) => isObject( item ) && Object.keys( item ).length > 0
)
.map(
( item ) => {
return {
label: (
<Rating
className={
productRatingsArray.includes(
item?.rating?.toString()
)
? 'is-active'
: ''
}
key={ item?.rating }
rating={ item?.rating }
ratedProductsCount={
blockAttributes.showCounts
? item?.count
: null
}
/>
),
value: item?.rating?.toString(),
};
},
[ blockAttributes.showCounts ]
);
.map( ( item ) => {
return {
label: (
<Rating
className={
Array.from( productRatings ).includes(
item?.rating?.toString()
)
? 'is-active'
: ''
}
key={ item?.rating }
rating={ item?.rating }
ratedProductsCount={
blockAttributes.showCounts ? item?.count : null
}
/>
),
value: item?.rating?.toString(),
};
} );
setDisplayedOptions( newOptions );
}, [
blockAttributes.showCounts,
blockAttributes.isPreview,
productRatingsArray,
filteredCounts,
filteredCountsLoading,
productRatings,
] );
/**
@ -251,6 +245,27 @@ const RatingFilterBlock = ( {
if ( ! previouslyChecked ) {
newChecked.push( checkedValue );
newChecked.sort();
speak(
sprintf(
/* translators: %s is referring to the average rating value */
__(
'Rated %s out of 5 filter added.',
'woo-gutenberg-products-block'
),
checkedValue
)
);
} else {
speak(
sprintf(
/* translators: %s is referring to the average rating value */
__(
'Rated %s out of 5 filter removed.',
'woo-gutenberg-products-block'
),
checkedValue
)
);
}
setChecked( newChecked );
},