@elementor/editor-audits 4.3.3 → 4.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-audits",
-  "version": "4.3.3",
+  "version": "4.3.5",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,20 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.3",
-    "@elementor/editor-mcp": "4.3.3",
-    "@elementor/editor-app-bar": "4.3.3",
-    "@elementor/editor-elements": "4.3.3",
-    "@elementor/editor-floating-panels": "4.3.3",
-    "@elementor/editor-notifications": "4.3.3",
-    "@elementor/editor-v1-adapters": "4.3.3",
-    "@elementor/events": "4.3.3",
-    "@elementor/http-client": "4.3.3",
-    "@elementor/icons": "~1.77.0",
-    "@elementor/locations": "4.3.3",
-    "@elementor/session": "4.3.3",
-    "@elementor/store": "4.3.3",
-    "@elementor/ui": "1.37.5"
+    "@elementor/editor": "4.3.5",
+    "@elementor/editor-mcp": "4.3.5",
+    "@elementor/editor-app-bar": "4.3.5",
+    "@elementor/editor-elements": "4.3.5",
+    "@elementor/editor-floating-panels": "4.3.5",
+    "@elementor/editor-notifications": "4.3.5",
+    "@elementor/editor-props": "4.3.5",
+    "@elementor/editor-styles": "4.3.5",
+    "@elementor/editor-v1-adapters": "4.3.5",
+    "@elementor/events": "4.3.5",
+    "@elementor/http-client": "4.3.5",
+    "@elementor/icons": "~1.78.1",
+    "@elementor/locations": "4.3.5",
+    "@elementor/session": "4.3.5",
+    "@elementor/store": "4.3.5",
+    "@elementor/ui": "1.41.1"
   },
   "peerDependencies": {
     "@wordpress/i18n": "^5.13.0",

package/src/api/page-context-client.ts

@@ -4,13 +4,16 @@ import { type PageContextResponse } from '../types';
 import { isNonceInvalidError, refreshAuditsNonce } from '../utils/session-expiration';
 import { getWindowConfig } from '../utils/window-config';
 
-export async function fetchPageContext( documentId: number, attachmentIds: number[] ): Promise< PageContextResponse > {
-	return requestPageContext( documentId, attachmentIds, true );
+export async function fetchPageContext(
+	documentId: number,
+	imageSizeRequests: string[]
+): Promise< PageContextResponse > {
+	return requestPageContext( documentId, imageSizeRequests, true );
 }
 
 async function requestPageContext(
 	documentId: number,
-	attachmentIds: number[],
+	imageSizeRequests: string[],
 	allowNonceRetry: boolean
 ): Promise< PageContextResponse > {
 	const { restNamespace, nonce } = getWindowConfig();
@@ -20,7 +23,7 @@ async function requestPageContext(
 		const response = await httpService().get< PageContextResponse >( url, {
 			params: {
 				document_id: documentId,
-				attachment_ids: attachmentIds,
+				image_size_requests: imageSizeRequests,
 			},
 			headers: { 'X-WP-Nonce': nonce },
 		} );
@@ -33,6 +36,6 @@ async function requestPageContext(
 
 		await refreshAuditsNonce();
 
-		return requestPageContext( documentId, attachmentIds, false );
+		return requestPageContext( documentId, imageSizeRequests, false );
 	}
 }

package/src/audits/accessibility-statement.ts

@@ -0,0 +1,39 @@
+import { __ } from '@wordpress/i18n';
+
+import { type Audit } from '../types';
+
+export const audit: Audit = {
+	id: 'audits/accessibility-statement',
+	title: __( 'Create an accessibility statement', 'elementor' ),
+	description: __(
+		'An accessibility statement showcases your efforts to create an inclusive online space, highlighting helpful features and a commitment to accessibility.',
+		'elementor'
+	),
+	fixHint: __( 'Use Ally to create and publish an accessibility statement for your site.', 'elementor' ),
+	categories: [ 'accessibility' ],
+	severity: 'info',
+	weight: 1,
+	evaluate: ( ctx ) => {
+		const isReady = ctx.pageContext.ally_plugin_active;
+
+		if ( isReady && ctx.pageContext.ally_accessibility_statement_created ) {
+			return { status: 'pass' };
+		}
+
+		return {
+			status: 'fail',
+			violations: [
+				{
+					auditId: audit.id,
+					label: __( 'No accessibility statement has been created for this site.', 'elementor' ),
+					externalUrl: isReady
+						? ctx.pageContext.ally_accessibility_statement_url
+						: ctx.pageContext.ally_plugin_url,
+					ctaLabel: __( 'Create', 'elementor' ),
+					secondaryCtaLabel: __( 'Learn more', 'elementor' ),
+					secondaryCtaUrl: 'https://elementor.com/help/start-using-ally/#statement',
+				},
+			],
+		};
+	},
+};

package/src/audits/accessibility-widget.ts

@@ -0,0 +1,41 @@
+import { __ } from '@wordpress/i18n';
+
+import { type Audit } from '../types';
+import { hasAccessibilityWidgetScript } from '../utils/scan-accessibility-widgets';
+
+export const audit: Audit = {
+	id: 'audits/accessibility-widget',
+	title: __( 'Add an accessibility widget', 'elementor' ),
+	description: __( 'Make your site more inclusive by adding an accessibility widget.', 'elementor' ),
+	fixHint: __( 'Activate Ally’s accessibility widget to give visitors on-page accessibility tools.', 'elementor' ),
+	categories: [ 'accessibility' ],
+	severity: 'info',
+	weight: 1,
+	evaluate: ( ctx ) => {
+		if ( ! ctx.pageContext.frontend_url ) {
+			return { status: 'skipped', reason: __( 'Page is not published.', 'elementor' ) };
+		}
+
+		if ( ! ctx.renderedHtml ) {
+			return { status: 'skipped', reason: __( 'Could not fetch the published page.', 'elementor' ) };
+		}
+
+		if ( hasAccessibilityWidgetScript( ctx.renderedHtml ) ) {
+			return { status: 'pass' };
+		}
+
+		const isReady = ctx.pageContext.ally_plugin_active;
+
+		return {
+			status: 'fail',
+			violations: [
+				{
+					auditId: audit.id,
+					label: __( 'No accessibility widget is active on this site.', 'elementor' ),
+					externalUrl: isReady ? ctx.pageContext.ally_widget_settings_url : ctx.pageContext.ally_plugin_url,
+					ctaLabel: __( 'Activate', 'elementor' ),
+				},
+			],
+		};
+	},
+};

package/src/audits/cookie-policy.ts

@@ -25,6 +25,7 @@ export const audit: Audit = {
 					auditId: audit.id,
 					label: __( 'Cookiez plugin is not installed or active.', 'elementor' ),
 					externalUrl: ctx.pageContext.cookiez_plugin_url,
+					ctaLabel: __( 'Set up cookie consent', 'elementor' ),
 				},
 			],
 		};

package/src/audits/google-consent-mode.ts

@@ -1,7 +1,6 @@
 import { __ } from '@wordpress/i18n';
 
 import { type Audit } from '../types';
-import { fetchRenderedHtml } from '../utils/fetch-rendered-html';
 import { hasConsentDefaultCall, hasGoogleTracking } from '../utils/scan-consent-signals';
 
 export const audit: Audit = {
@@ -18,22 +17,20 @@ export const audit: Audit = {
 	categories: [ 'compliance' ],
 	severity: 'warning',
 	weight: 1,
-	evaluate: async ( ctx ) => {
+	evaluate: ( ctx ) => {
 		if ( ! ctx.pageContext.frontend_url ) {
 			return { status: 'skipped', reason: __( 'Page is not published.', 'elementor' ) };
 		}
 
-		const html = await fetchRenderedHtml( ctx.pageContext.frontend_url );
-
-		if ( ! html ) {
+		if ( ! ctx.renderedHtml ) {
 			return { status: 'skipped', reason: __( 'Could not fetch the published page.', 'elementor' ) };
 		}
 
-		if ( ! hasGoogleTracking( html ) ) {
+		if ( ! hasGoogleTracking( ctx.renderedHtml ) ) {
 			return { status: 'skipped', reason: __( 'No Google tracking product detected.', 'elementor' ) };
 		}
 
-		if ( hasConsentDefaultCall( html ) ) {
+		if ( hasConsentDefaultCall( ctx.renderedHtml ) ) {
 			return { status: 'pass' };
 		}
 

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,15 +13,16 @@ 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' ) };
 		}
 
+		const isReady = ctx.pageContext.ally_plugin_active;
 		const violations: AuditViolation[] = [];
 		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;
 			}
@@ -35,7 +36,8 @@ export const audit: Audit = {
 					elementId: node.id,
 					targetHint: 'element-settings',
 					label: __( 'Image is missing alt text.', 'elementor' ),
-					externalUrl: ctx.pageContext.ally_plugin_url,
+					externalUrl: isReady ? ctx.pageContext.ally_scan_url : ctx.pageContext.ally_plugin_url,
+					ctaLabel: __( 'Fix with Ally', 'elementor' ),
 				} );
 			}
 		} );

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

@@ -0,0 +1,66 @@
+import { __ } from '@wordpress/i18n';
+
+import { type Audit, type AuditViolation, type ElementSnapshotNode } from '../types';
+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' ] );
+
+export const audit: Audit = {
+	id: 'audits/images-inefficient-format',
+	title: __( 'Inefficient image format', 'elementor' ),
+	description: __( "Image isn't served in a modern, efficient format like WebP or AVIF.", 'elementor' ),
+	fixHint: __( 'Convert the image to a modern format like WebP or AVIF, or enable image optimization.', 'elementor' ),
+	categories: [ 'performance' ],
+	severity: 'info',
+	weight: 1,
+	evaluate: ( ctx ) => {
+		const isReady = ctx.pageContext.image_optimization_plugin_active;
+		const offendingElementIds = new Set< string >();
+		let hasAnyImage = false;
+		let inefficientImageFormatCount = 0;
+
+		const evaluateSource = ( node: ElementSnapshotNode, media: ImageLikeMedia ) => {
+			if ( media.id || media.url ) {
+				hasAnyImage = true;
+			}
+
+			const id = media.id;
+
+			if ( ! id ) {
+				return;
+			}
+
+			const mime = ctx.pageContext.image_sizes[ buildImageSizeKey( { id, size: media.size } ) ]?.mime;
+
+			if ( ! mime || ! LEGACY_RASTER_MIME_TYPES.has( mime ) ) {
+				return;
+			}
+
+			inefficientImageFormatCount++;
+			offendingElementIds.add( node.id );
+		};
+
+		walkAllImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
+
+		if ( ! hasAnyImage ) {
+			return { status: 'skipped', reason: __( 'No images', 'elementor' ) };
+		}
+
+		const violations: AuditViolation[] = Array.from( offendingElementIds ).map( ( elementId ) => ( {
+			auditId: audit.id,
+			elementId,
+			targetHint: 'element-settings' as const,
+			label: __( "Image isn't served in a modern format like WebP or AVIF.", 'elementor' ),
+			externalUrl: isReady
+				? ctx.pageContext.image_optimization_settings_url
+				: ctx.pageContext.image_optimization_plugin_url,
+			ctaLabel: __( 'Optimize all', 'elementor' ),
+		} ) );
+
+		return violations.length === 0
+			? { status: 'pass' }
+			: { status: 'fail', violations, metadata: { inefficientImageFormatCount } };
+	},
+};

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

@@ -1,7 +1,9 @@
 import { __, sprintf } from '@wordpress/i18n';
 
-import { type Audit, type AuditViolation } from '../types';
-import { hasPageImages, walkImageLikeSources } from '../utils/image-like-sources';
+import { type Audit, type AuditViolation, type ElementSnapshotNode } from '../types';
+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;
 const BYTES_PER_KB = 1024;
@@ -15,21 +17,23 @@ export const audit: Audit = {
 	severity: 'warning',
 	weight: 7,
 	evaluate: ( ctx ) => {
-		if ( ! hasPageImages( ctx.elements.tree ) ) {
-			return { status: 'skipped', reason: __( 'No images', 'elementor' ) };
-		}
-
+		const isReady = ctx.pageContext.image_optimization_plugin_active;
 		const widgetMaxKb = new Map< string, number >();
 		let oversizedImageCount = 0;
+		let hasAnyImage = false;
+
+		const evaluateSource = ( node: ElementSnapshotNode, media: ImageLikeMedia ) => {
+			if ( media.id || media.url ) {
+				hasAnyImage = true;
+			}
 
-		walkImageLikeSources( ctx.elements.tree, ( { node, media } ) => {
 			const id = media.id;
 
 			if ( ! id ) {
 				return;
 			}
 
-			const size = ctx.pageContext.image_sizes[ id ];
+			const size = ctx.pageContext.image_sizes[ buildImageSizeKey( { id, size: media.size } ) ];
 
 			if ( ! size || size.filesize_bytes <= SIZE_THRESHOLD_BYTES ) {
 				return;
@@ -40,7 +44,13 @@ export const audit: Audit = {
 			const kb = Math.round( size.filesize_bytes / BYTES_PER_KB );
 			const currentMax = widgetMaxKb.get( node.id ) ?? 0;
 			widgetMaxKb.set( node.id, Math.max( currentMax, kb ) );
-		} );
+		};
+
+		walkAllImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
+
+		if ( ! hasAnyImage ) {
+			return { status: 'skipped', reason: __( 'No images', 'elementor' ) };
+		}
 
 		const violations: AuditViolation[] = Array.from( widgetMaxKb.entries() ).map( ( [ elementId, kb ] ) => ( {
 			auditId: audit.id,
@@ -51,7 +61,10 @@ export const audit: Audit = {
 				__( 'Image is %d KB (over 500 KB).', 'elementor' ),
 				kb
 			),
-			externalUrl: ctx.pageContext.image_optimization_plugin_url,
+			externalUrl: isReady
+				? ctx.pageContext.image_optimization_settings_url
+				: ctx.pageContext.image_optimization_plugin_url,
+			ctaLabel: __( 'Optimize all', 'elementor' ),
 		} ) );
 
 		return violations.length === 0

package/src/audits/nested-boxed-containers.ts

@@ -35,6 +35,11 @@ export const audit: Audit = {
 					elementId: node.id,
 					targetHint: 'element-settings',
 					label: __( 'Nested boxed container.', 'elementor' ),
+					angieFix: true,
+					angiePrompt: __(
+						'Find containers that have nested containers. Containers can be deep-nested. Update the nested container styling so that when a parent container already uses a boxed setting, any inner container inside it is set to Full Width. Keep the first parent container boxed, remove all boxed styling from the nested inner containers, and preserve the inner container’s content, spacing, alignment, and hierarchy.',
+						'elementor'
+					),
 				} );
 			}
 		} );

package/src/components/audit-feedback.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
+import { useFloatingPanelZIndex } from '@elementor/editor-floating-panels';
 import { notify } from '@elementor/editor-notifications';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { useMixpanel } from '@elementor/events';
@@ -21,6 +22,7 @@ import {
 import { __ } from '@wordpress/i18n';
 
 import {
+	AUDIT_PANEL_ID,
 	FEEDBACK_CANCELLED_EVENT,
 	FEEDBACK_CLICKED_EVENT,
 	FEEDBACK_CLOSED_EVENT,
@@ -58,6 +60,7 @@ export default function AuditFeedback() {
 	const [ feedbackText, setFeedbackText ] = useState( '' );
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
 	const { dispatchEvent: trackEvent = ( ...args: unknown[] ) => void args } = useMixpanel();
+	const panelZIndex = useFloatingPanelZIndex( AUDIT_PANEL_ID );
 
 	if ( ! isExperimentActive( FEEDBACK_EXPERIMENT_NAME ) ) {
 		return null;
@@ -117,7 +120,7 @@ export default function AuditFeedback() {
 
 	return (
 		<>
-			<Tooltip title={ triggerLabel } placement="top">
+			<Tooltip title={ triggerLabel } placement="top" PopperProps={ { sx: { zIndex: panelZIndex } } }>
 				<IconButton size="small" aria-label={ triggerLabel } onClick={ handleOpen }>
 					<MessageLinesIcon fontSize="small" />
 				</IconButton>

package/src/components/audit-panel.tsx

@@ -1,27 +1,29 @@
 import * as React from 'react';
-import { getCurrentDocumentId } from '@elementor/editor-elements';
+import { getHostDocumentId } from '@elementor/editor-elements';
 import { FloatingPanelBody, FloatingPanelFooter, FloatingPanelHeader } from '@elementor/editor-floating-panels';
-import { Box, Button, Typography } from '@elementor/ui';
+import { Box, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { AUDIT_PANEL_ID } from '../constants';
 import { useAuditReport } from '../hooks/use-audit-report';
 import AuditFeedback from './audit-feedback';
 import ErrorPage from './pages/error-page';
 import LoadingPage from './pages/loading-page';
 import WelcomePage from './pages/welcome-page';
 import ReportShell from './report-shell';
+import RescanButton from './rescan-button';
 
 export default function AuditPanel() {
-	const { status, report, error, run } = useAuditReport();
+	const { status, report, error, isStale, run } = useAuditReport();
 
-	const currentDocumentId = getCurrentDocumentId() ?? 0;
-	const onRun = () => run( currentDocumentId );
+	const hostDocumentId = getHostDocumentId() ?? 0;
+	const onRun = () => run( hostDocumentId );
 	const lastScanLabel = report ? new Date( report.runAt ).toLocaleTimeString() : null;
 
 	return (
 		<>
 			<FloatingPanelHeader
-				panelId="audit-panel"
+				panelId={ AUDIT_PANEL_ID }
 				title={ __( 'Page Audit', 'elementor' ) }
 				badge={ __( 'Beta', 'elementor' ) }
 				titleVariant="subtitle2"
@@ -47,14 +49,12 @@ export default function AuditPanel() {
 					<Box sx={ { flex: 1 } } />
 				) }
 				{ lastScanLabel && <AuditFeedback /> }
-				<Button
-					variant="contained"
-					size="small"
+				<RescanButton
+					hasScanned={ Boolean( lastScanLabel ) }
+					isStale={ isStale }
+					disabled={ status === 'loading' || hostDocumentId === 0 }
 					onClick={ onRun }
-					disabled={ status === 'loading' || currentDocumentId === 0 }
-				>
-					{ lastScanLabel ? __( 'Re-scan', 'elementor' ) : __( 'Run page audit', 'elementor' ) }
-				</Button>
+				/>
 			</FloatingPanelFooter>
 		</>
 	);

package/src/components/audit-toggle-icon.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { ShieldCheckIcon } from '@elementor/icons';
+import { __useSelector as useSelector } from '@elementor/store';
+import { Badge } from '@elementor/ui';
+
+import { type GlobalState, selectIsStale } from '../store';
+
+export default function AuditToggleIcon() {
+	const isStale = useSelector( ( state: GlobalState ) => selectIsStale( state ) );
+
+	return (
+		<Badge
+			variant="dot"
+			color="warning"
+			invisible={ ! isStale }
+			overlap="circular"
+			slotProps={ { badge: { 'data-testid': 'audit-stale-indicator' } } }
+		>
+			<ShieldCheckIcon />
+		</Badge>
+	);
+}

package/src/components/fix-violation-with-angie.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react';
 import { isAngieAvailable, sendPromptToAngie } from '@elementor/editor-mcp';
 import { AngieIcon } from '@elementor/icons';
-import { IconButton, Tooltip } from '@elementor/ui';
+import { Button, IconButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { ANGIE_FIX_ENTRY_POINT, CREATE_WIDGET_EVENT } from '../constants';
 
 type Props = {
 	prompt: string;
+	panelZIndex: number;
+	variant?: 'icon' | 'button';
 };
 
-export default function FixViolationWithAngie( { prompt }: Props ) {
+export default function FixViolationWithAngie( { prompt, panelZIndex, variant = 'icon' }: Props ) {
 	const label = __( 'Fix with Angie', 'elementor' );
 	const href = `#angie-prompt=${ encodeURIComponent( prompt ) }`;
 
@@ -33,16 +35,25 @@ export default function FixViolationWithAngie( { prompt }: Props ) {
 		);
 	};
 
-	return (
-		<Tooltip title={ label }>
-			<IconButton
-				className="violation-hover-icon"
+	if ( variant === 'button' ) {
+		return (
+			<Button
 				component="a"
 				href={ href }
 				size="small"
-				aria-label={ label }
+				color="secondary"
+				variant="outlined"
+				startIcon={ <AngieIcon fontSize="tiny" aria-hidden={ true } /> }
 				onClick={ handleClick }
 			>
+				{ label }
+			</Button>
+		);
+	}
+
+	return (
+		<Tooltip title={ label } placement="top" PopperProps={ { sx: { zIndex: panelZIndex } } }>
+			<IconButton component="a" href={ href } size="small" aria-label={ label } onClick={ handleClick }>
 				<AngieIcon fontSize="tiny" />
 			</IconButton>
 		</Tooltip>

package/src/components/pages/category-page.tsx

@@ -3,6 +3,7 @@ import { Box } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { CATEGORY_LABELS } from '../../constants';
+import { useSingleExpandedCard } from '../../hooks/use-single-expanded-card';
 import { type AuditCategory, type PageAuditReport } from '../../types';
 import { partitionAuditResults } from '../../utils/audit-status-summary';
 import { CATEGORY_ICONS } from '../category-icons';
@@ -18,7 +19,8 @@ type Props = {
 
 export default function CategoryPage( { category, report, onBack }: Props ) {
 	const Icon = CATEGORY_ICONS[ category ];
-	const { failed, passed, totalViolations } = partitionAuditResults( report, { category } );
+	const { failed, passed, skipped, totalViolations } = partitionAuditResults( report, { category } );
+	const { expandedId, toggle } = useSingleExpandedCard();
 
 	return (
 		<>
@@ -36,12 +38,34 @@ export default function CategoryPage( { category, report, onBack }: Props ) {
 					defaultExpanded
 				>
 					{ failed.map( ( r ) => (
-						<ViolationRow key={ r.audit.id } audit={ r.audit } violations={ r.result.violations } />
+						<ViolationRow
+							key={ r.audit.id }
+							audit={ r.audit }
+							violations={ r.result.violations }
+							expanded={ expandedId === r.audit.id }
+							onToggleExpand={ () => toggle( r.audit.id ) }
+						/>
 					) ) }
 				</StatusSection>
 				<StatusSection label={ __( 'Passed audits', 'elementor' ) } count={ passed.length } color="success">
 					{ passed.map( ( r ) => (
-						<ViolationRow key={ r.audit.id } audit={ r.audit } />
+						<ViolationRow
+							key={ r.audit.id }
+							audit={ r.audit }
+							expanded={ expandedId === r.audit.id }
+							onToggleExpand={ () => toggle( r.audit.id ) }
+						/>
+					) ) }
+				</StatusSection>
+				<StatusSection label={ __( 'Skipped audits', 'elementor' ) } count={ skipped.length } color="default">
+					{ skipped.map( ( r ) => (
+						<ViolationRow
+							key={ r.audit.id }
+							audit={ r.audit }
+							skipReason={ r.result.reason }
+							expanded={ expandedId === r.audit.id }
+							onToggleExpand={ () => toggle( r.audit.id ) }
+						/>
 					) ) }
 				</StatusSection>
 			</Box>