Use custom button for threat details toggle (#40298)

projects/js-packages/components/components/threat-modal/fixer-state-notice.tsx

@@ -1,4 +1,5 @@
 import { __ } from '@wordpress/i18n';
+import { useMemo } from 'react';
 import styles from './styles.module.scss';
 import ThreatNotice from './threat-notice';
 
@@ -18,29 +19,39 @@ const FixerStateNotice = ( {
 }: {
 	fixerState: { inProgress: boolean; error: boolean; stale: boolean };
 } ) => {
-	let status: 'error' | 'success' | undefined;
-	let title: string | undefined;
-	let content: string | undefined;
+	const { status, title, content } = useMemo( () => {
+		if ( fixerState.error ) {
+			return {
+				status: 'error' as const,
+				title: __( 'An error occurred auto-fixing this threat', 'jetpack' ),
+				content: __(
+					'Jetpack encountered a filesystem error while attempting to auto-fix this threat. Please try again later or contact support.',
+					'jetpack'
+				),
+			};
+		}
 
-	if ( fixerState.error ) {
-		status = 'error';
-		title = __( 'An error occurred auto-fixing this threat', 'jetpack' );
-		content = __(
-			'Jetpack encountered a filesystem error while attempting to auto-fix this threat. Please try again later or contact support.',
-			'jetpack'
-		);
-	} else if ( fixerState.stale ) {
-		status = 'error';
-		title = __( 'The auto-fixer is taking longer than expected', 'jetpack' );
-		content = __(
-			'Jetpack has been attempting to auto-fix this threat for too long, and something may have gone wrong. Please try again later or contact support.',
-			'jetpack'
-		);
-	} else if ( fixerState.inProgress ) {
-		status = 'success';
-		title = __( 'An auto-fixer is in progress', 'jetpack' );
-		content = __( 'Please wait while Jetpack auto-fixes the threat.', 'jetpack' );
-	}
+		if ( fixerState.stale ) {
+			return {
+				status: 'error' as const,
+				title: __( 'The auto-fixer is taking longer than expected', 'jetpack' ),
+				content: __(
+					'Jetpack has been attempting to auto-fix this threat for too long, and something may have gone wrong. Please try again later or contact support.',
+					'jetpack'
+				),
+			};
+		}
+
+		if ( fixerState.inProgress ) {
+			return {
+				status: 'success' as const,
+				title: __( 'An auto-fixer is in progress', 'jetpack' ),
+				content: __( 'Please wait while Jetpack auto-fixes the threat.', 'jetpack' ),
+			};
+		}
+
+		return {};
+	}, [ fixerState ] );
 
 	return title ? (
 		<div className={ styles[ 'fixer-notice' ] }>

projects/js-packages/components/components/threat-modal/styles.module.scss

@@ -14,15 +14,24 @@
 		justify-content: flex-start;
 		align-items: center;
 	}
+}
 
-	&__closed {
-		max-height: 0;
-		overflow: hidden;
-	}
+.section__toggle {
+	border: none;
+	background: none;
+	padding: 0;
+	font-size: 1rem;
+	font-weight: 600;
+	cursor: pointer;
+	display: flex;
+	gap: calc( var( --spacing-base ) / 2 ); // 4px
+	align-items: center;
+	transition: text-underline-offset 0.2s;
 
-	&__open {
-		max-height: fit-content;
-		overflow: hidden;
+	&:hover {
+		text-decoration: underline;
+		text-decoration-thickness: 2px;
+		text-underline-offset: calc( var( --spacing-base ) / 2 ); // 4px
 	}
 }
 

projects/js-packages/components/components/threat-modal/threat-technical-details.tsx

@@ -1,7 +1,7 @@
-import { Text, Button } from '@automattic/jetpack-components';
+import { Text } from '@automattic/jetpack-components';
 import { Threat } from '@automattic/jetpack-scan';
 import { __ } from '@wordpress/i18n';
-import { chevronDown, chevronUp } from '@wordpress/icons';
+import { chevronDown, chevronUp, Icon } from '@wordpress/icons';
 import { useState, useCallback } from 'react';
 import DiffViewer from '../diff-viewer';
 import MarkedLines from '../marked-lines';
@@ -29,25 +29,35 @@ const ThreatTechnicalDetails = ( { threat }: { threat: Threat } ): JSX.Element =
 	return (
 		<div className={ styles.section }>
 			<div className={ styles.section__title }>
-				<Text variant="title-small">{ __( 'The technical details', 'jetpack' ) }</Text>
-				<Button
-					variant="icon"
+				<button
 					className={ styles.section__toggle }
-					icon={ open ? chevronUp : chevronDown }
 					aria-expanded={ open }
+					aria-controls={ `threat-details-${ threat.id }` }
 					onClick={ toggleOpen }
-				/>
-			</div>
-			<div className={ open ? styles.section__open : styles.section__closed }>
-				{ threat.filename && (
-					<>
-						<Text>{ __( 'Threat found in file:', 'jetpack' ) }</Text>
-						<pre className={ styles.filename }>{ threat.filename }</pre>
-					</>
-				) }
-				{ threat.context && <MarkedLines context={ threat.context } /> }
-				{ threat.diff && <DiffViewer diff={ threat.diff } /> }
+				>
+					<span>
+						{ open
+							? __( 'Hide the technical details', 'jetpack' )
+							: __( 'Show the technical details', 'jetpack' ) }
+					</span>
+					<Icon icon={ open ? chevronUp : chevronDown } size={ 24 } />
+				</button>
 			</div>
+			{ open && (
+				<div
+					className={ open ? styles.section__open : styles.section__closed }
+					id={ `threat-details-${ threat.id }` }
+				>
+					{ threat.filename && (
+						<>
+							<Text>{ __( 'Threat found in file:', 'jetpack' ) }</Text>
+							<pre className={ styles.filename }>{ threat.filename }</pre>
+						</>
+					) }
+					{ threat.context && <MarkedLines context={ threat.context } /> }
+					{ threat.diff && <DiffViewer diff={ threat.diff } /> }
+				</div>
+			) }
 		</div>
 	);
 };