@elementor/editor-audits 4.3.4 → 4.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-audits",
-  "version": "4.3.4",
+  "version": "4.3.5",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.4",
-    "@elementor/editor-mcp": "4.3.4",
-    "@elementor/editor-app-bar": "4.3.4",
-    "@elementor/editor-elements": "4.3.4",
-    "@elementor/editor-floating-panels": "4.3.4",
-    "@elementor/editor-notifications": "4.3.4",
-    "@elementor/editor-props": "4.3.4",
-    "@elementor/editor-styles": "4.3.4",
-    "@elementor/editor-v1-adapters": "4.3.4",
-    "@elementor/events": "4.3.4",
-    "@elementor/http-client": "4.3.4",
-    "@elementor/icons": "~1.77.0",
-    "@elementor/locations": "4.3.4",
-    "@elementor/session": "4.3.4",
-    "@elementor/store": "4.3.4",
-    "@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/audits/accessibility-statement.ts

@@ -29,9 +29,9 @@ export const audit: Audit = {
 					externalUrl: isReady
 						? ctx.pageContext.ally_accessibility_statement_url
 						: ctx.pageContext.ally_plugin_url,
-					ctaLabel: isReady ? __( 'Create', 'elementor' ) : undefined,
+					ctaLabel: __( 'Create', 'elementor' ),
 					secondaryCtaLabel: __( 'Learn more', 'elementor' ),
-					secondaryCtaUrl: 'https://go.elementor.com/acc-plg-learn-more',
+					secondaryCtaUrl: 'https://elementor.com/help/start-using-ally/#statement',
 				},
 			],
 		};

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/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

@@ -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' ] );
@@ -18,6 +16,7 @@ export const audit: Audit = {
 	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;
@@ -43,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' ) };
@@ -57,7 +53,10 @@ export const audit: Audit = {
 			elementId,
 			targetHint: 'element-settings' as const,
 			label: __( "Image isn't served in a modern format like WebP or AVIF.", 'elementor' ),
-			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/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;
@@ -19,6 +17,7 @@ export const audit: Audit = {
 	severity: 'warning',
 	weight: 7,
 	evaluate: ( ctx ) => {
+		const isReady = ctx.pageContext.image_optimization_plugin_active;
 		const widgetMaxKb = new Map< string, number >();
 		let oversizedImageCount = 0;
 		let hasAnyImage = false;
@@ -47,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' ) };
@@ -65,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>

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { Box, Chip, Typography } from '@elementor/ui';
+import { Box, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { ALL_CATEGORIES, CATEGORY_LABELS } from '../../constants';
 import { type AuditCategory, type PageAuditReport } from '../../types';
 import { getPopulatedCategories } from '../../utils/audit-status-summary';
-import { getScoreTier } from '../../utils/score-thresholds';
+import { countSeverities } from '../../utils/severity-counts';
+import IssuesCategoryRow from '../issues-category-row';
 import Promotions from '../promotions';
-import ScoreBar from '../score-bar';
-import ScoreCircle from '../score-circle';
+import SeveritySummaryCards from '../severity-summary-cards';
 
 type Props = {
 	onCategoryClick: ( category: AuditCategory ) => void;
@@ -17,35 +17,30 @@ type Props = {
 
 export default function OverviewPage( { onCategoryClick, report }: Props ) {
 	const populatedCategories = getPopulatedCategories( report.categories, ALL_CATEGORIES );
-	const overallScore = getScoreTier( report.overall );
+
+	const categoryRows = populatedCategories
+		.map( ( category ) => ( { category, counts: countSeverities( report, category ) } ) )
+		.filter( ( { counts } ) => Object.values( counts ).some( ( count ) => count > 0 ) );
 
 	return (
-		<Box sx={ { display: 'flex', flexDirection: 'column', gap: 4, p: 2 } }>
-			<Box sx={ { display: 'flex', alignItems: 'center', gap: 2 } }>
-				<ScoreCircle color={ overallScore.color } score={ report.overall } />
-				<Box sx={ { display: 'flex', flexDirection: 'column', gap: 0.5 } }>
-					<Chip
-						label={ overallScore.label }
-						color={ overallScore.color }
-						variant="standard"
-						size="small"
-						sx={ { fontWeight: 600, alignSelf: 'flex-start' } }
-					/>
-					<Typography variant="body2" color="text.secondary">
-						{ __( 'Overall score', 'elementor' ) }
-					</Typography>
+		<Box display="flex" flexDirection="column" gap={ 3 } p={ 2 }>
+			<SeveritySummaryCards report={ report } />
+			<Box display="flex" flexDirection="column" gap={ 1 }>
+				<Typography variant="subtitle1" component="h2">
+					{ __( 'All issues', 'elementor' ) }
+				</Typography>
+				<Box 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>
-			<Box sx={ { display: 'flex', flexDirection: 'column', gap: 2 } }>
-				{ populatedCategories.map( ( category ) => (
-					<ScoreBar
-						key={ category }
-						label={ CATEGORY_LABELS[ category ] }
-						score={ report.categories[ category ].score }
-						onClick={ () => onCategoryClick( category ) }
-					/>
-				) ) }
-			</Box>
 			<Promotions report={ report } />
 		</Box>
 	);

package/src/components/report-shell.tsx

@@ -1,114 +1,33 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Box, Divider, Tab, Tabs } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
+import { Box } from '@elementor/ui';
 
 import { type AuditCategory, type PageAuditReport } from '../types';
-import { type AuditStatusGroup } from '../utils/audit-status-summary';
-import AllAuditsPage from './pages/all-audits-page';
 import CategoryPage from './pages/category-page';
-import IssuesPage from './pages/issues-page';
 import OverviewPage from './pages/overview-page';
 
-type TabId = 'overview' | 'issues';
-
-type ActivePage =
-	| 'overview'
-	| 'issues'
-	| { backTo: TabId; category: AuditCategory }
-	| { backTo: TabId; expand?: AuditStatusGroup; page: 'all-audits' };
+type ActivePage = 'overview' | { category: AuditCategory };
 
 type Props = {
 	report: PageAuditReport;
 };
 
-function activeTab( page: ActivePage ): TabId {
-	if ( page === 'overview' ) {
-		return 'overview';
-	}
-
-	if ( page === 'issues' ) {
-		return 'issues';
-	}
-
-	return page.backTo;
-}
-
-function isAllAuditsPage( page: ActivePage ): page is { backTo: TabId; expand?: AuditStatusGroup; page: 'all-audits' } {
-	return typeof page === 'object' && 'page' in page && page.page === 'all-audits';
-}
-
-function isCategoryPage( page: ActivePage ): page is { backTo: TabId; category: AuditCategory } {
+function isCategoryPage( page: ActivePage ): page is { category: AuditCategory } {
 	return typeof page === 'object' && 'category' in page;
 }
 
 export default function ReportShell( { report }: Props ) {
 	const [ activePage, setActivePage ] = useState< ActivePage >( 'overview' );
 
-	const currentTab = activeTab( activePage );
-
-	const handleTabChange = ( _: React.SyntheticEvent, value: TabId ) => {
-		setActivePage( value );
-	};
-
-	const openCategory = ( category: AuditCategory, backTo: TabId ) => {
-		setActivePage( { category, backTo } );
-	};
-
-	const openAllAudits = ( expand?: AuditStatusGroup, backTo: TabId = 'issues' ) => {
-		setActivePage( { page: 'all-audits', expand, backTo } );
-	};
-
-	const backFromSubPage = () => {
-		if ( isAllAuditsPage( activePage ) || isCategoryPage( activePage ) ) {
-			setActivePage( activePage.backTo );
-		}
-	};
+	const openCategory = ( category: AuditCategory ) => setActivePage( { category } );
+	const backToOverview = () => setActivePage( 'overview' );
 
 	return (
-		<Box sx={ { display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 } }>
-			<Box sx={ { flexShrink: 0 } }>
-				<Tabs
-					aria-label={ __( 'Audit navigation', 'elementor' ) }
-					value={ currentTab }
-					onChange={ handleTabChange }
-					textColor="secondary"
-					indicatorColor="secondary"
-					size="small"
-					centered={ true }
-					variant="fullWidth"
-				>
-					<Tab value="overview" label={ __( 'Overview', 'elementor' ) } />
-					<Tab value="issues" label={ __( 'Issues', 'elementor' ) } />
-				</Tabs>
-				<Divider />
-			</Box>
-			<Box sx={ { flex: 1, minHeight: 0, overflowY: 'auto' } }>
-				{ activePage === 'overview' && (
-					<OverviewPage
-						report={ report }
-						onCategoryClick={ ( category ) => openCategory( category, 'overview' ) }
-					/>
-				) }
-				{ activePage === 'issues' && (
-					<IssuesPage
-						report={ report }
-						onCategoryClick={ ( category ) => openCategory( category, 'issues' ) }
-						onAllAuditsClick={ () => openAllAudits() }
-						onStatusClick={ ( status ) => openAllAudits( status ) }
-					/>
-				) }
-				{ isAllAuditsPage( activePage ) && (
-					<AllAuditsPage
-						report={ report }
-						initialExpandedStatus={ activePage.expand }
-						onBack={ backFromSubPage }
-					/>
-				) }
-				{ isCategoryPage( activePage ) && (
-					<CategoryPage category={ activePage.category } report={ report } onBack={ backFromSubPage } />
-				) }
-			</Box>
+		<Box sx={ { flex: 1, minHeight: 0, overflowY: 'auto' } }>
+			{ activePage === 'overview' && <OverviewPage report={ report } onCategoryClick={ openCategory } /> }
+			{ isCategoryPage( activePage ) && (
+				<CategoryPage category={ activePage.category } report={ report } onBack={ backToOverview } />
+			) }
 		</Box>
 	);
 }