mirror of
https://ghproxy.net/https://github.com/elementor/one-click-accessibility.git
synced 2026-07-22 12:27:13 +08:00
63ed290ba7* add: preview images for bulk-alt-text * add: bulk alt text banner * fix: padding * add: bulk alt text banner component * add: icons * add: support for aborting the fetch request * add: bulk alt text manager * update: husky * fix: optimized images * update: memoize images * fix: imports * add: focustrap * add: mixpanel events * update: add logic to save alt text when editing manually * fix: abort controller reference and cleanup * fix: improve key stability in image grid rendering * refactor: add PropTypes validation and memoization to ImageCard component * feat: add error handling for ImageCard component using ErrorBoundary * fix: auto selection logic for card with bulk generation * add: loading and generation states * refactor: restructure bulk alt text components and enhance progress handling and decentralized logic * refactor: extract logic from progress bar to hook * add: quota exceeded alert * add: promotional banner for generate button * update: Generate button for selection mode * fix: button alignment * update: hide banner for 2 or less images * fix: box shadow * add: mixpanel events * update: rename variable * add: bulk upgrade url * update: link handling for upgrade * fix: box shadow * add: border radius to dialog * update: improved accessibility notifications * fix: height and padding for banner * update: add more context to image card * add: ARIA labels * add: focus on card * add: decode URI component * fix: accessibility issues * add: encoding for file names * fix: styled components * update: made progress bar sticky * update: add logic to disable button on bulk generation * fix: style * fix: closing the dialog while generating * add: error handling * fix: mark prop as not required * Fix: Prevent MUI from adding aria-hidden to dialog parent elements [APP-2261] * add: error handling for quota api error * fix: prop requirement * add: close handler to dialog * fix: ui * fix: icons * fix: width of dialog * fix: width of bulk dialog --------- Co-authored-by: Kniazevych <pavlok@elementor.red>
63 lines
2 KiB
JavaScript
63 lines
2 KiB
JavaScript
import Chip from '@elementor/ui/Chip';
|
|
import Grid from '@elementor/ui/Grid';
|
|
import Typography from '@elementor/ui/Typography';
|
|
import { styled } from '@elementor/ui/styles';
|
|
import BulkAltTextButton from '@ea11y-apps/scanner/components/bulk-alt-text/bulk-alt-text-button';
|
|
import BulkBannerImageStack from '@ea11y-apps/scanner/components/bulk-alt-text/bulk-banner-image-stack';
|
|
import { useScannerWizardContext } from '@ea11y-apps/scanner/context/scanner-wizard-context';
|
|
import bulk1 from '@ea11y-apps/scanner/images/bulk-1.png';
|
|
import bulk2 from '@ea11y-apps/scanner/images/bulk-2.png';
|
|
import bulk3 from '@ea11y-apps/scanner/images/bulk-3.png';
|
|
import bulk4 from '@ea11y-apps/scanner/images/bulk-4.png';
|
|
import { sprintf, _n } from '@wordpress/i18n';
|
|
|
|
const BulkAltTextBanner = () => {
|
|
const { sortedViolations } = useScannerWizardContext();
|
|
const bulkImages = [bulk1, bulk2, bulk3, bulk4];
|
|
|
|
if (sortedViolations.altText.length <= 2) {
|
|
return null;
|
|
}
|
|
|
|
const imagesToShow =
|
|
sortedViolations.altText.length > 3
|
|
? 4
|
|
: Number(sortedViolations.altText.length);
|
|
|
|
return (
|
|
<StyledBannerGrid container>
|
|
<Grid item container width="auto" alignItems="center" flexWrap="nowrap">
|
|
<BulkBannerImageStack images={bulkImages} count={imagesToShow} />
|
|
<Chip
|
|
label={
|
|
<Typography fontSize={12} fontWeight={500}>
|
|
{sprintf(
|
|
// Translators: %d number of images
|
|
_n('%d image', '%d images', 14, 'pojo-accessibility'),
|
|
sortedViolations.altText.length,
|
|
)}
|
|
</Typography>
|
|
}
|
|
size="tiny"
|
|
color="info"
|
|
sx={{ marginInlineStart: -2 }}
|
|
/>
|
|
</Grid>
|
|
<Grid item>
|
|
<BulkAltTextButton />
|
|
</Grid>
|
|
</StyledBannerGrid>
|
|
);
|
|
};
|
|
|
|
export default BulkAltTextBanner;
|
|
|
|
const StyledBannerGrid = styled(Grid)(({ theme }) => ({
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingInline: theme.spacing(3),
|
|
flexWrap: 'nowrap',
|
|
marginBottom: theme.spacing(2),
|
|
boxShadow: 'rgba(0, 0, 0, 0.12) 0px 10px 14px -8px',
|
|
paddingBlock: theme.spacing(1.25),
|
|
}));
|
