@elementor/editor-audits 4.4.0-1129 → 4.4.0-1131

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-audits",
-  "version": "4.4.0-1129",
+  "version": "4.4.0-1131",
   "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-1129",
-    "@elementor/editor-mcp": "4.4.0-1129",
-    "@elementor/editor-app-bar": "4.4.0-1129",
-    "@elementor/editor-elements": "4.4.0-1129",
-    "@elementor/editor-floating-panels": "4.4.0-1129",
-    "@elementor/editor-notifications": "4.4.0-1129",
-    "@elementor/editor-props": "4.4.0-1129",
-    "@elementor/editor-styles": "4.4.0-1129",
-    "@elementor/editor-v1-adapters": "4.4.0-1129",
-    "@elementor/events": "4.4.0-1129",
-    "@elementor/http-client": "4.4.0-1129",
+    "@elementor/editor": "4.4.0-1131",
+    "@elementor/editor-mcp": "4.4.0-1131",
+    "@elementor/editor-app-bar": "4.4.0-1131",
+    "@elementor/editor-elements": "4.4.0-1131",
+    "@elementor/editor-floating-panels": "4.4.0-1131",
+    "@elementor/editor-notifications": "4.4.0-1131",
+    "@elementor/editor-props": "4.4.0-1131",
+    "@elementor/editor-styles": "4.4.0-1131",
+    "@elementor/editor-v1-adapters": "4.4.0-1131",
+    "@elementor/events": "4.4.0-1131",
+    "@elementor/http-client": "4.4.0-1131",
     "@elementor/icons": "~1.78.1",
-    "@elementor/locations": "4.4.0-1129",
-    "@elementor/session": "4.4.0-1129",
-    "@elementor/store": "4.4.0-1129",
+    "@elementor/locations": "4.4.0-1131",
+    "@elementor/session": "4.4.0-1131",
+    "@elementor/store": "4.4.0-1131",
     "@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/components/severity-summary-cards.tsx

@@ -33,7 +33,7 @@ function SeverityCard( { severity, count }: SeverityCardProps ) {
 			flex={ 1 }
 			flexDirection="column"
 			gap={ 1 }
-			bgcolor="grey.50"
+			bgcolor="action.hover"
 			borderRadius={ 1.5 }
 			px={ 1.5 }
 			py={ 1 }

package/src/register-audits.ts

@@ -22,7 +22,6 @@ import * as robotsNoindex from './audits/robots-noindex';
 import * as scanForCookies from './audits/scan-for-cookies';
 import * as sectionsAndColumns from './audits/sections-and-columns';
 import * as siteIdentity from './audits/site-identity';
-import * as tooManyWidgets from './audits/too-many-widgets';
 import { registerAudit } from './registry';
 import { type Audit } from './types';
 
@@ -33,7 +32,6 @@ const AUDITS: Audit[] = [
 
 	hiddenElements.audit,
 	deprecatedWidgets.audit,
-	tooManyWidgets.audit,
 	sectionsAndColumns.audit,
 	deepNesting.audit,
 	nestedBoxedContainers.audit,

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();
 }

package/src/audits/too-many-widgets.ts

@@ -1,53 +0,0 @@
-import { getWidgetsCache } from '@elementor/editor-elements';
-import { __ } from '@wordpress/i18n';
-
-import { type Audit, type ElementSnapshotNode } from '../types';
-import { walkElements } from '../utils/walk';
-
-const WIDGET_COUNT_THRESHOLD = 100;
-
-function isCountableWidget( node: ElementSnapshotNode, widgetsCache: ReturnType< typeof getWidgetsCache > ): boolean {
-	if ( node.elType === 'widget' ) {
-		return true;
-	}
-
-	return !! widgetsCache?.[ node.elType ]?.meta?.is_compound;
-}
-
-export const audit: Audit = {
-	id: 'audits/too-many-widgets',
-	title: __( 'Too many widgets', 'elementor' ),
-	description: __( 'Excessive DOM size caused by too many widgets degrades rendering performance.', 'elementor' ),
-	fixHint: __( 'Reduce the number of widgets on the page by removing or combining elements.', 'elementor' ),
-	categories: [ 'best-practices', 'performance' ],
-	severity: 'warning',
-	weight: 5,
-	evaluate: ( ctx ) => {
-		if ( ctx.elements.tree.length === 0 ) {
-			return { status: 'skipped', reason: __( 'No elements', 'elementor' ) };
-		}
-
-		const widgetsCache = getWidgetsCache();
-		let widgetCount = 0;
-
-		walkElements( ctx.elements.tree, ( node ) => {
-			if ( isCountableWidget( node, widgetsCache ) ) {
-				widgetCount++;
-			}
-		} );
-
-		if ( widgetCount <= WIDGET_COUNT_THRESHOLD ) {
-			return { status: 'pass' };
-		}
-
-		return {
-			status: 'fail',
-			violations: [
-				{
-					auditId: audit.id,
-					label: __( 'Page has too many widgets.', 'elementor' ),
-				},
-			],
-		};
-	},
-};