@elementor/editor-audits 4.3.2 → 4.3.4

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

@@ -0,0 +1,32 @@
+import { type ElementSnapshotNode } from '../types';
+import { type ImageLikeMedia } from './image-like-sources';
+import { walkElements } from './walk';
+
+const BACKGROUND_IMAGE_SETTING_KEYS = [
+	'background_image',
+	'background_hover_image',
+	'background_overlay_image',
+	'background_overlay_hover_image',
+	'_background_image',
+	'_background_hover_image',
+] as const;
+
+export type BackgroundImageSourceVisit = {
+	node: ElementSnapshotNode;
+	media: ImageLikeMedia;
+};
+
+export function walkBackgroundImageSources(
+	tree: ElementSnapshotNode[],
+	visit: ( source: BackgroundImageSourceVisit ) => void
+): void {
+	walkElements( tree, ( node ) => {
+		for ( const key of BACKGROUND_IMAGE_SETTING_KEYS ) {
+			const media = node.settings[ key ] as ImageLikeMedia | undefined;
+
+			if ( media?.id || media?.url ) {
+				visit( { node, media } );
+			}
+		}
+	} );
+}

package/src/utils/image-alt.ts

@@ -1,5 +1,6 @@
 import { type PageContextResponse } from '../types';
 import { type ImageLikeMedia } from './image-like-sources';
+import { buildImageSizeKey } from './image-size-key';
 
 export function hasMeaningfulAlt( media: ImageLikeMedia, pageContext: PageContextResponse ): boolean {
 	if ( ! media.id && ! media.url ) {
@@ -7,7 +8,8 @@ export function hasMeaningfulAlt( media: ImageLikeMedia, pageContext: PageContex
 	}
 
 	if ( media.id ) {
-		const alt = pageContext.image_sizes[ media.id ]?.alt ?? '';
+		const key = buildImageSizeKey( { id: media.id, size: media.size } );
+		const alt = pageContext.image_sizes[ key ]?.alt ?? '';
 		return alt.trim().length > 0;
 	}
 

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

@@ -7,6 +7,7 @@ export type ImageLikeMedia = {
 	id?: number;
 	url?: string;
 	alt?: string;
+	size?: string;
 };
 
 export type ImageLikeSourceVisit = {
@@ -51,7 +52,7 @@ function collectMediaFromNode( node: ElementSnapshotNode ): ImageLikeMedia[] {
 	const image = node.settings.image as ImageLikeMedia | undefined;
 
 	if ( image?.id || image?.url ) {
-		sources.push( image );
+		sources.push( { ...image, size: node.settings.image_size as string | undefined } );
 	}
 
 	const gallery = ( node.settings.carousel ?? node.settings.gallery ?? node.settings.wp_gallery ) as
@@ -59,9 +60,11 @@ function collectMediaFromNode( node: ElementSnapshotNode ): ImageLikeMedia[] {
 		| undefined;
 
 	if ( Array.isArray( gallery ) ) {
+		const gallerySize = node.settings.thumbnail_size as string | undefined;
+
 		for ( const item of gallery ) {
 			if ( item?.id || item?.url ) {
-				sources.push( item );
+				sources.push( { ...item, size: gallerySize } );
 			}
 		}
 	}

package/src/utils/image-size-key.ts

@@ -0,0 +1,8 @@
+export type ImageSizeRequest = {
+	id: number;
+	size?: string;
+};
+
+export function buildImageSizeKey( { id, size }: ImageSizeRequest ): string {
+	return `${ id }:${ size || 'full' }`;
+}

package/src/utils/page-attachments.ts

@@ -1,14 +1,23 @@
 import { type ElementSnapshotNode } from '../types';
-import { walkImageLikeSources } from './image-like-sources';
+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 { buildImageSizeKey } from './image-size-key';
 
-export function extractAttachmentIds( tree: ElementSnapshotNode[] ): number[] {
-	const ids = new Set< number >();
+export function extractImageSizeRequests( tree: ElementSnapshotNode[] ): string[] {
+	const keys = new Set< string >();
 
-	walkImageLikeSources( tree, ( { media } ) => {
+	const collect = ( media: ImageLikeMedia ) => {
 		if ( media.id ) {
-			ids.add( media.id );
+			keys.add( buildImageSizeKey( { id: media.id, size: media.size } ) );
 		}
-	} );
+	};
 
-	return Array.from( ids ).sort( ( a, b ) => a - b );
+	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/utils/scan-accessibility-widgets.ts

@@ -0,0 +1,7 @@
+// Script sources of known accessibility widgets. Ally is listed first; append third-party
+// widget script sources here (UserWay, AccessiBe, EqualWeb, etc.) once confirmed.
+const ACCESSIBILITY_WIDGET_SCRIPT_SOURCES = [ 'cdn.elementor.com/a11y/widget.js' ];
+
+export function hasAccessibilityWidgetScript( html: string ): boolean {
+	return ACCESSIBILITY_WIDGET_SCRIPT_SOURCES.some( ( src ) => html.includes( src ) );
+}