diff --git a/src/components/image-alt-display.tsx b/src/components/image-alt-display.tsx index 026921f..305e5ae 100644 --- a/src/components/image-alt-display.tsx +++ b/src/components/image-alt-display.tsx @@ -15,6 +15,8 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) { const [showMissingOnly, setShowMissingOnly] = useState(false); const [imageErrors, setImageErrors] = useState>({}); + const missingAltCount = images.filter((img) => !img.alt).length; + const filteredImages = showMissingOnly ? images.filter((img) => !img.alt) : images; @@ -25,15 +27,27 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) { return (
-
- setShowMissingOnly(!!checked)} - /> - +
+
+ setShowMissingOnly(!!checked)} + /> + +
+
+ {missingAltCount > 0 ? ( +

+ {missingAltCount} of{" "} + {images.length} images are missing alt text. +

+ ) : ( +

+ Great! All {images.length} images have alt text. +

+ )} +
{filteredImages.map((image, index) => (