@elementor/editor-audits 4.3.4 → 4.3.5

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/audit-status-summary.ts

@@ -1,12 +1,7 @@
-import { type ChipProps } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
 import { type AuditCategory, type AuditResult, type AuditRun, type PageAuditReport } from '../types';
 import { isScoredAudit } from './is-scored-audit';
 import { sortFailedAuditResults } from './sort-failed-audits';
 
-export type AuditStatusGroup = 'fail' | 'pass' | 'skipped';
-
 export type PartitionedAuditResults = {
 	failed: Array< AuditRun & { result: Extract< AuditResult, { status: 'fail' } > } >;
 	passed: Array< AuditRun & { result: Extract< AuditResult, { status: 'pass' } > } >;
@@ -61,58 +56,6 @@ export function partitionAuditResults(
 	};
 }
 
-export function auditStatusDisplayCounts( report: PageAuditReport ): Record< AuditStatusGroup, number > {
-	let pass = 0;
-	let skipped = 0;
-	let totalViolations = 0;
-
-	for ( const { audit, result } of report.auditResults ) {
-		if ( ! isScoredAudit( audit ) ) {
-			continue;
-		}
-
-		switch ( result.status ) {
-			case 'fail':
-				totalViolations += result.violations.length;
-				break;
-			case 'pass':
-				pass++;
-				break;
-			case 'skipped':
-				skipped++;
-				break;
-		}
-	}
-
-	return {
-		fail: totalViolations,
-		pass,
-		skipped,
-	};
-}
-
-export function auditStatusColor( status: AuditStatusGroup ): ChipProps[ 'color' ] {
-	switch ( status ) {
-		case 'fail':
-			return 'error';
-		case 'pass':
-			return 'success';
-		case 'skipped':
-			return 'default';
-	}
-}
-
-export function auditStatusLabel( status: AuditStatusGroup ): string {
-	switch ( status ) {
-		case 'fail':
-			return __( 'Failed audits', 'elementor' );
-		case 'pass':
-			return __( 'Passed audits', 'elementor' );
-		case 'skipped':
-			return __( 'Skipped audits', 'elementor' );
-	}
-}
-
 export function getPopulatedCategories(
 	categoryTotals: PageAuditReport[ 'categories' ],
 	categories: readonly AuditCategory[]

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' ),
-				},
-			],
-		};
-	},
-};

package/src/components/audit-statuses-section.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { Box, Divider, Typography } from '@elementor/ui';
-import { __, sprintf } from '@wordpress/i18n';
-
-import { type PageAuditReport } from '../types';
-import {
-	auditStatusColor,
-	auditStatusDisplayCounts,
-	type AuditStatusGroup,
-	auditStatusLabel,
-} from '../utils/audit-status-summary';
-import CountSummaryCircle from './count-summary-circle';
-
-type Props = {
-	report: PageAuditReport;
-	onStatusClick: ( status: AuditStatusGroup ) => void;
-};
-
-const STATUS_ARIA_LABELS: Record< AuditStatusGroup, ( count: number ) => string > = {
-	pass: ( count ) =>
-		sprintf(
-			/* translators: %d: number of passed audits. */
-			__( '%d passed audits, view all', 'elementor' ),
-			count
-		),
-	fail: ( count ) =>
-		sprintf(
-			/* translators: %d: number of failed audit violations. */
-			__( '%d failed audits, view all', 'elementor' ),
-			count
-		),
-	skipped: ( count ) =>
-		sprintf(
-			/* translators: %d: number of skipped audits. */
-			__( '%d skipped audits, view all', 'elementor' ),
-			count
-		),
-};
-
-const STATUS_GROUPS = [ 'fail', 'pass', 'skipped' ] as const;
-
-export default function AuditStatusesSection( { report, onStatusClick }: Props ) {
-	const statusCounts = auditStatusDisplayCounts( report );
-
-	return (
-		<>
-			<Typography variant="subtitle1" fontWeight="bold">
-				{ __( 'Audit statuses', 'elementor' ) }
-			</Typography>
-			<Box sx={ { display: 'flex', justifyContent: 'space-around', gap: 2 } }>
-				{ STATUS_GROUPS.map( ( status ) => (
-					<CountSummaryCircle
-						key={ status }
-						ariaLabel={ STATUS_ARIA_LABELS[ status ]( statusCounts[ status ] ) }
-						color={ auditStatusColor( status ) }
-						count={ statusCounts[ status ] }
-						label={ auditStatusLabel( status ) }
-						onClick={ () => onStatusClick( status ) }
-					/>
-				) ) }
-			</Box>
-			<Divider />
-		</>
-	);
-}

package/src/components/count-summary-circle.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import { Box, Chip, type ChipProps, type Theme, Typography } from '@elementor/ui';
-
-type Props = {
-	ariaLabel: string;
-	color: ChipProps[ 'color' ];
-	count: number;
-	label: string;
-	onClick: () => void;
-};
-
-const COUNT_SUMMARY_CIRCLE_SIZE = 64;
-const COUNT_SUMMARY_BORDER_WIDTH = 4;
-
-function chipBorderColor( theme: Theme, color: ChipProps[ 'color' ] ): string {
-	if ( color === 'default' || ! color ) {
-		return theme.palette.text.secondary;
-	}
-
-	return theme.palette[ color ].main;
-}
-
-export default function CountSummaryCircle( { ariaLabel, color, count, label, onClick }: Props ) {
-	return (
-		<Box
-			aria-label={ ariaLabel }
-			component="button"
-			onClick={ onClick }
-			type="button"
-			sx={ {
-				alignItems: 'center',
-				background: 'none',
-				border: 'none',
-				cursor: 'pointer',
-				display: 'flex',
-				flex: 1,
-				flexDirection: 'column',
-				gap: 0.5,
-				padding: 0,
-			} }
-		>
-			<Chip
-				color={ color }
-				label={ count }
-				size="small"
-				variant="standard"
-				sx={ ( theme: Theme ) => ( {
-					border: `${ COUNT_SUMMARY_BORDER_WIDTH }px solid ${ chipBorderColor( theme, color ) }`,
-					borderRadius: '50%',
-					height: COUNT_SUMMARY_CIRCLE_SIZE,
-					maxWidth: COUNT_SUMMARY_CIRCLE_SIZE,
-					width: COUNT_SUMMARY_CIRCLE_SIZE,
-					'& .MuiChip-label': {
-						fontSize: theme.typography.body2.fontSize,
-						fontWeight: 700,
-						lineHeight: 1,
-						padding: 0,
-					},
-				} ) }
-			/>
-			<Typography color="text.secondary" sx={ { textAlign: 'center' } } variant="caption">
-				{ label }
-			</Typography>
-		</Box>
-	);
-}

package/src/components/pages/all-audits-page.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { Box } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { type PageAuditReport } from '../../types';
-import {
-	auditStatusColor,
-	type AuditStatusGroup,
-	auditStatusLabel,
-	partitionAuditResults,
-} from '../../utils/audit-status-summary';
-import StatusSection from '../status-section';
-import SubpageHeader from '../subpage-header';
-import ViolationRow from '../violation-row';
-
-type Props = {
-	initialExpandedStatus?: AuditStatusGroup;
-	onBack: () => void;
-	report: PageAuditReport;
-};
-
-export default function AllAuditsPage( { initialExpandedStatus, onBack, report }: Props ) {
-	const { failed, passed, skipped, totalViolations } = partitionAuditResults( report );
-	const expandFail = ! initialExpandedStatus || initialExpandedStatus === 'fail';
-	const expandPass = initialExpandedStatus === 'pass';
-	const expandSkipped = initialExpandedStatus === 'skipped';
-
-	return (
-		<Box key={ initialExpandedStatus ?? 'default' }>
-			<SubpageHeader title={ __( 'All audits', 'elementor' ) } onBack={ onBack } />
-			<Box sx={ { p: 1 } }>
-				<StatusSection
-					label={ auditStatusLabel( 'fail' ) }
-					count={ totalViolations }
-					color={ auditStatusColor( 'fail' ) }
-					defaultExpanded={ expandFail }
-				>
-					{ failed.map( ( r ) => (
-						<ViolationRow key={ r.audit.id } audit={ r.audit } violations={ r.result.violations } />
-					) ) }
-				</StatusSection>
-				<StatusSection
-					label={ auditStatusLabel( 'pass' ) }
-					count={ passed.length }
-					color={ auditStatusColor( 'pass' ) }
-					defaultExpanded={ expandPass }
-				>
-					{ passed.map( ( r ) => (
-						<ViolationRow key={ r.audit.id } audit={ r.audit } />
-					) ) }
-				</StatusSection>
-				<StatusSection
-					label={ auditStatusLabel( 'skipped' ) }
-					count={ skipped.length }
-					color={ auditStatusColor( 'skipped' ) }
-					defaultExpanded={ expandSkipped }
-				>
-					{ skipped.map( ( r ) => (
-						<ViolationRow key={ r.audit.id } audit={ r.audit } skipReason={ r.result.reason } />
-					) ) }
-				</StatusSection>
-			</Box>
-		</Box>
-	);
-}

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

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { Box, Link, Typography } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { ALL_CATEGORIES, CATEGORY_LABELS } from '../../constants';
-import { type AuditCategory, type PageAuditReport } from '../../types';
-import { type AuditStatusGroup, getPopulatedCategories } from '../../utils/audit-status-summary';
-import { countSeverities, type SeverityCounts } from '../../utils/severity-counts';
-import AuditStatusesSection from '../audit-statuses-section';
-import IssuesCategoryRow from '../issues-category-row';
-import SeverityFilterChips, { type SeverityFilter } from '../severity-filter-chips';
-
-type Props = {
-	report: PageAuditReport;
-	onCategoryClick: ( category: AuditCategory ) => void;
-	onAllAuditsClick: () => void;
-	onStatusClick: ( status: AuditStatusGroup ) => void;
-};
-
-function filterCounts( counts: SeverityCounts, filter: SeverityFilter ): SeverityCounts {
-	if ( filter === 'all' ) {
-		return counts;
-	}
-
-	return { error: 0, warning: 0, info: 0, [ filter ]: counts[ filter ] };
-}
-
-export default function IssuesPage( { report, onCategoryClick, onAllAuditsClick, onStatusClick }: Props ) {
-	const [ filter, setFilter ] = useState< SeverityFilter >( 'all' );
-	const populatedCategories = getPopulatedCategories( report.categories, ALL_CATEGORIES );
-
-	const categoryRows = populatedCategories
-		.map( ( category ) => ( { category, counts: filterCounts( countSeverities( report, category ), filter ) } ) )
-		.filter( ( { counts } ) => Object.values( counts ).some( ( count ) => count > 0 ) );
-
-	return (
-		<Box sx={ { display: 'flex', flexDirection: 'column', gap: 4, p: 2 } }>
-			<AuditStatusesSection report={ report } onStatusClick={ onStatusClick } />
-			<Link
-				component="button"
-				underline="none"
-				color="inherit"
-				onClick={ onAllAuditsClick }
-				sx={ { textAlign: 'start' } }
-			>
-				<Typography variant="subtitle1" component="h2">
-					{ __( 'All issues', 'elementor' ) }
-				</Typography>
-			</Link>
-			<SeverityFilterChips selected={ filter } onChange={ setFilter } />
-			<Box sx={ { display: 'flex', flexDirection: 'column', gap: 1 } }>
-				{ categoryRows.map( ( { category, counts } ) => (
-					<IssuesCategoryRow
-						key={ category }
-						category={ category }
-						label={ CATEGORY_LABELS[ category ] }
-						counts={ counts }
-						onClick={ () => onCategoryClick( category ) }
-					/>
-				) ) }
-			</Box>
-		</Box>
-	);
-}

package/src/components/score-bar.tsx

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { ChevronRightIcon } from '@elementor/icons';
-import { Box, LinearProgress, Rotate, Typography, useTheme } from '@elementor/ui';
-
-import { onKeyboardClick } from '../utils/keyboard-click';
-import { getScoreTier } from '../utils/score-thresholds';
-
-type Props = {
-	label: string;
-	score: number;
-	onClick?: () => void;
-};
-
-export default function ScoreBar( { label, score, onClick }: Props ) {
-	const isRtl = 'rtl' === useTheme().direction;
-
-	return (
-		<Box
-			role={ onClick ? 'button' : undefined }
-			tabIndex={ onClick ? 0 : undefined }
-			onClick={ onClick }
-			onKeyDown={ onClick ? onKeyboardClick( onClick ) : undefined }
-			sx={ {
-				display: 'flex',
-				alignItems: 'center',
-				gap: 1,
-				cursor: onClick ? 'pointer' : 'default',
-				outline: 'none',
-				'&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', borderRadius: 1 },
-				py: 0.5,
-			} }
-		>
-			<Typography variant="body2" sx={ { minWidth: 96 } }>
-				{ label }
-			</Typography>
-			<LinearProgress
-				variant="determinate"
-				value={ score }
-				color={ getScoreTier( score ).color }
-				sx={ { flex: 1, height: 6, borderRadius: 4, bgcolor: 'action.disabledBackground' } }
-			/>
-			<Typography
-				variant="body2"
-				color="text.primary"
-				sx={ { minWidth: 24, textAlign: 'right', fontWeight: 900 } }
-			>
-				{ score }
-			</Typography>
-			{ onClick && (
-				<Rotate in={ isRtl }>
-					<ChevronRightIcon fontSize="small" color="action" />
-				</Rotate>
-			) }
-		</Box>
-	);
-}

package/src/components/score-circle.tsx

@@ -1,60 +0,0 @@
-import * as React from 'react';
-import { Box, CircularProgress, Typography } from '@elementor/ui';
-
-import { getScoreTier, type ScoreColor } from '../utils/score-thresholds';
-
-type Props = {
-	color?: ScoreColor;
-	score: number;
-};
-
-const SCORE_CIRCLE_SIZE = 88;
-const SCORE_CIRCLE_THICKNESS = 3;
-
-export default function ScoreCircle( { color, score }: Props ) {
-	const progressColor = color ?? getScoreTier( score ).color;
-
-	return (
-		<Box
-			role="progressbar"
-			aria-valuenow={ score }
-			aria-valuemin={ 0 }
-			aria-valuemax={ 100 }
-			sx={ { position: 'relative', display: 'inline-flex' } }
-		>
-			<CircularProgress
-				variant="determinate"
-				value={ 100 }
-				size={ SCORE_CIRCLE_SIZE }
-				thickness={ SCORE_CIRCLE_THICKNESS }
-				sx={ { color: 'action.disabledBackground' } }
-			/>
-			<CircularProgress
-				variant="determinate"
-				value={ score }
-				size={ SCORE_CIRCLE_SIZE }
-				thickness={ SCORE_CIRCLE_THICKNESS }
-				color={ progressColor }
-				sx={ { position: 'absolute', left: 0 } }
-			/>
-			<Box
-				sx={ {
-					position: 'absolute',
-					inset: 0,
-					display: 'flex',
-					alignItems: 'center',
-					justifyContent: 'center',
-				} }
-			>
-				<Typography
-					variant="h4"
-					component="span"
-					color="text.primary"
-					sx={ { fontWeight: 700, lineHeight: 1 } }
-				>
-					{ score }
-				</Typography>
-			</Box>
-		</Box>
-	);
-}

package/src/components/severity-filter-chips.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import { Box, Chip } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { type AuditSeverity } from '../types';
-import { ALL_SEVERITIES, severityPluralLabel } from '../utils/severity-counts';
-import SeverityIcon from './severity-icons';
-
-export type SeverityFilter = 'all' | AuditSeverity;
-
-type Props = {
-	selected: SeverityFilter;
-	onChange: ( filter: SeverityFilter ) => void;
-};
-
-export default function SeverityFilterChips( { selected, onChange }: Props ) {
-	return (
-		<Box sx={ { display: 'flex', alignItems: 'center', gap: 1 } }>
-			<FilterChip
-				label={ __( 'All', 'elementor' ) }
-				isSelected={ selected === 'all' }
-				onClick={ () => onChange( 'all' ) }
-			/>
-			{ ALL_SEVERITIES.map( ( severity ) => (
-				<FilterChip
-					key={ severity }
-					label={ severityPluralLabel( severity ) }
-					icon={ <SeverityIcon severity={ severity } /> }
-					isSelected={ selected === severity }
-					onClick={ () => onChange( severity ) }
-				/>
-			) ) }
-		</Box>
-	);
-}
-
-type FilterChipProps = {
-	label: string;
-	icon?: React.ReactElement;
-	isSelected: boolean;
-	onClick: () => void;
-};
-
-function FilterChip( { label, icon, isSelected, onClick }: FilterChipProps ) {
-	return (
-		<Chip
-			label={ label }
-			icon={ icon }
-			size="small"
-			variant="filled"
-			color="default"
-			onClick={ onClick }
-			aria-pressed={ isSelected }
-			sx={ { bgcolor: isSelected ? 'action.selected' : 'transparent' } }
-		/>
-	);
-}