@elementor/editor-audits 4.4.0-1130 → 4.4.0-1132

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-audits",
-  "version": "4.4.0-1130",
+  "version": "4.4.0-1132",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,21 +39,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.4.0-1130",
-    "@elementor/editor-mcp": "4.4.0-1130",
-    "@elementor/editor-app-bar": "4.4.0-1130",
-    "@elementor/editor-elements": "4.4.0-1130",
-    "@elementor/editor-floating-panels": "4.4.0-1130",
-    "@elementor/editor-notifications": "4.4.0-1130",
-    "@elementor/editor-props": "4.4.0-1130",
-    "@elementor/editor-styles": "4.4.0-1130",
-    "@elementor/editor-v1-adapters": "4.4.0-1130",
-    "@elementor/events": "4.4.0-1130",
-    "@elementor/http-client": "4.4.0-1130",
+    "@elementor/editor": "4.4.0-1132",
+    "@elementor/editor-mcp": "4.4.0-1132",
+    "@elementor/editor-app-bar": "4.4.0-1132",
+    "@elementor/editor-elements": "4.4.0-1132",
+    "@elementor/editor-floating-panels": "4.4.0-1132",
+    "@elementor/editor-notifications": "4.4.0-1132",
+    "@elementor/editor-props": "4.4.0-1132",
+    "@elementor/editor-styles": "4.4.0-1132",
+    "@elementor/editor-v1-adapters": "4.4.0-1132",
+    "@elementor/events": "4.4.0-1132",
+    "@elementor/http-client": "4.4.0-1132",
     "@elementor/icons": "~1.78.1",
-    "@elementor/locations": "4.4.0-1130",
-    "@elementor/session": "4.4.0-1130",
-    "@elementor/store": "4.4.0-1130",
+    "@elementor/locations": "4.4.0-1132",
+    "@elementor/session": "4.4.0-1132",
+    "@elementor/store": "4.4.0-1132",
     "@elementor/ui": "1.41.1"
   },
   "peerDependencies": {

package/src/audits/images-alt-text.ts

@@ -1,8 +1,8 @@
 import { __ } from '@wordpress/i18n';
 
 import { type Audit, type AuditViolation } from '../types';
+import { hasAltTextImages, walkAltTextImageSources } from '../utils/alt-text-image-sources';
 import { hasMeaningfulAlt, isImageSourcePresent } from '../utils/image-alt';
-import { hasPageImages, walkImageLikeSources } from '../utils/image-like-sources';
 
 export const audit: Audit = {
 	id: 'audits/images-alt-text',
@@ -13,7 +13,7 @@ export const audit: Audit = {
 	severity: 'error',
 	weight: 10,
 	evaluate: ( ctx ) => {
-		if ( ! hasPageImages( ctx.elements.tree ) ) {
+		if ( ! hasAltTextImages( ctx.elements.tree ) ) {
 			return { status: 'skipped', reason: __( 'No images', 'elementor' ) };
 		}
 
@@ -22,7 +22,7 @@ export const audit: Audit = {
 		const failedWidgetIds = new Set< string >();
 		let missingAltImageCount = 0;
 
-		walkImageLikeSources( ctx.elements.tree, ( { node, media } ) => {
+		walkAltTextImageSources( ctx.elements.tree, ( { node, media } ) => {
 			if ( ! isImageSourcePresent( media ) || hasMeaningfulAlt( media, ctx.pageContext ) ) {
 				return;
 			}

package/src/audits/images-inefficient-format.ts

@@ -1,10 +1,8 @@
 import { __ } from '@wordpress/i18n';
 
 import { type Audit, type AuditViolation, type ElementSnapshotNode } from '../types';
-import { walkAtomicBackgroundImageSources } from '../utils/atomic-background-image-sources';
-import { walkAtomicImageSources } from '../utils/atomic-image-sources';
-import { walkBackgroundImageSources } from '../utils/background-image-sources';
-import { type ImageLikeMedia, walkImageLikeSources } from '../utils/image-like-sources';
+import { walkAllImageSources } from '../utils/all-image-sources';
+import { type ImageLikeMedia } from '../utils/image-like-sources';
 import { buildImageSizeKey } from '../utils/image-size-key';
 
 const LEGACY_RASTER_MIME_TYPES = new Set( [ 'image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/tiff' ] );
@@ -44,10 +42,7 @@ export const audit: Audit = {
 			offendingElementIds.add( node.id );
 		};
 
-		walkImageLikeSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
-		walkBackgroundImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
-		walkAtomicImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
-		walkAtomicBackgroundImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
+		walkAllImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
 
 		if ( ! hasAnyImage ) {
 			return { status: 'skipped', reason: __( 'No images', 'elementor' ) };

package/src/audits/images-too-large.ts

@@ -1,10 +1,8 @@
 import { __, sprintf } from '@wordpress/i18n';
 
 import { type Audit, type AuditViolation, type ElementSnapshotNode } from '../types';
-import { walkAtomicBackgroundImageSources } from '../utils/atomic-background-image-sources';
-import { walkAtomicImageSources } from '../utils/atomic-image-sources';
-import { walkBackgroundImageSources } from '../utils/background-image-sources';
-import { type ImageLikeMedia, walkImageLikeSources } from '../utils/image-like-sources';
+import { walkAllImageSources } from '../utils/all-image-sources';
+import { type ImageLikeMedia } from '../utils/image-like-sources';
 import { buildImageSizeKey } from '../utils/image-size-key';
 
 const SIZE_THRESHOLD_BYTES = 500 * 1024;
@@ -48,10 +46,7 @@ export const audit: Audit = {
 			widgetMaxKb.set( node.id, Math.max( currentMax, kb ) );
 		};
 
-		walkImageLikeSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
-		walkBackgroundImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
-		walkAtomicImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
-		walkAtomicBackgroundImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
+		walkAllImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
 
 		if ( ! hasAnyImage ) {
 			return { status: 'skipped', reason: __( 'No images', 'elementor' ) };

package/src/utils/all-image-sources.ts

@@ -0,0 +1,17 @@
+import { type ElementSnapshotNode } from '../types';
+import { walkAtomicBackgroundImageSources } from './atomic-background-image-sources';
+import { walkAtomicImageSources } from './atomic-image-sources';
+import { walkBackgroundImageSources } from './background-image-sources';
+import { type ImageLikeMedia, walkImageLikeSources } from './image-like-sources';
+
+export type ImageSourceVisit = {
+	node: ElementSnapshotNode;
+	media: ImageLikeMedia;
+};
+
+export function walkAllImageSources( tree: ElementSnapshotNode[], visit: ( source: ImageSourceVisit ) => void ): void {
+	walkImageLikeSources( tree, visit );
+	walkBackgroundImageSources( tree, visit );
+	walkAtomicImageSources( tree, visit );
+	walkAtomicBackgroundImageSources( tree, visit );
+}

package/src/utils/alt-text-image-sources.ts

@@ -0,0 +1,24 @@
+import { type ElementSnapshotNode } from '../types';
+import { type ImageSourceVisit } from './all-image-sources';
+import { ATOMIC_CONTENT_IMAGE_PROP_KEYS, walkAtomicImageSources } from './atomic-image-sources';
+import { walkImageLikeSources } from './image-like-sources';
+
+export function walkAltTextImageSources(
+	tree: ElementSnapshotNode[],
+	visit: ( source: ImageSourceVisit ) => void
+): void {
+	walkImageLikeSources( tree, visit );
+	walkAtomicImageSources( tree, visit, ATOMIC_CONTENT_IMAGE_PROP_KEYS );
+}
+
+export function hasAltTextImages( tree: ElementSnapshotNode[] ): boolean {
+	let found = false;
+
+	walkAltTextImageSources( tree, ( { media } ) => {
+		if ( media.id || media.url ) {
+			found = true;
+		}
+	} );
+
+	return found;
+}

package/src/utils/atomic-image-sources.ts

@@ -10,7 +10,9 @@ import { type ElementSnapshotNode } from '../types';
 import { type ImageLikeMedia } from './image-like-sources';
 import { walkElements } from './walk';
 
-const ATOMIC_IMAGE_PROP_KEYS = [ 'image', 'poster' ] as const;
+export const ATOMIC_CONTENT_IMAGE_PROP_KEYS = [ 'image' ] as const;
+
+const ATOMIC_IMAGE_PROP_KEYS = [ ...ATOMIC_CONTENT_IMAGE_PROP_KEYS, 'poster' ] as const;
 
 export type AtomicImageSourceVisit = {
 	node: ElementSnapshotNode;
@@ -19,14 +21,15 @@ export type AtomicImageSourceVisit = {
 
 export function walkAtomicImageSources(
 	tree: ElementSnapshotNode[],
-	visit: ( source: AtomicImageSourceVisit ) => void
+	visit: ( source: AtomicImageSourceVisit ) => void,
+	propKeys: readonly string[] = ATOMIC_IMAGE_PROP_KEYS
 ): void {
 	walkElements( tree, ( node ) => {
 		if ( node.elType !== 'widget' ) {
 			return;
 		}
 
-		for ( const key of ATOMIC_IMAGE_PROP_KEYS ) {
+		for ( const key of propKeys ) {
 			const media = extractAtomicImageMedia( node.settings[ key ] );
 
 			if ( media ) {
@@ -56,7 +59,8 @@ export function extractAtomicImageMedia( imageProp: unknown ): ImageLikeMedia |
 		return null;
 	}
 
+	const alt = stringPropTypeUtil.extract( src.alt ) ?? undefined;
 	const size = stringPropTypeUtil.extract( image.size ) ?? undefined;
 
-	return { id, url, size };
+	return { id, url, alt, size };
 }

package/src/utils/image-like-sources.ts

@@ -15,18 +15,6 @@ export type ImageLikeSourceVisit = {
 	media: ImageLikeMedia;
 };
 
-export function hasPageImages( tree: ElementSnapshotNode[] ): boolean {
-	let found = false;
-
-	walkImageLikeSources( tree, ( { media } ) => {
-		if ( media.id || media.url ) {
-			found = true;
-		}
-	} );
-
-	return found;
-}
-
 export function walkImageLikeSources(
 	tree: ElementSnapshotNode[],
 	visit: ( source: ImageLikeSourceVisit ) => void

package/src/utils/page-attachments.ts

@@ -1,23 +1,15 @@
 import { type ElementSnapshotNode } from '../types';
-import { walkAtomicBackgroundImageSources } from './atomic-background-image-sources';
-import { walkAtomicImageSources } from './atomic-image-sources';
-import { walkBackgroundImageSources } from './background-image-sources';
-import { type ImageLikeMedia, walkImageLikeSources } from './image-like-sources';
+import { walkAllImageSources } from './all-image-sources';
 import { buildImageSizeKey } from './image-size-key';
 
 export function extractImageSizeRequests( tree: ElementSnapshotNode[] ): string[] {
 	const keys = new Set< string >();
 
-	const collect = ( media: ImageLikeMedia ) => {
+	walkAllImageSources( tree, ( { media } ) => {
 		if ( media.id ) {
 			keys.add( buildImageSizeKey( { id: media.id, size: media.size } ) );
 		}
-	};
-
-	walkImageLikeSources( tree, ( { media } ) => collect( media ) );
-	walkBackgroundImageSources( tree, ( { media } ) => collect( media ) );
-	walkAtomicImageSources( tree, ( { media } ) => collect( media ) );
-	walkAtomicBackgroundImageSources( tree, ( { media } ) => collect( media ) );
+	} );
 
 	return Array.from( keys ).sort();
 }