fix: address PR review comments

- Remove unused @wordpress/i18n import
- Fix aria-describedby ID mismatch for accessibility
- Fix double translation of tipMessage
- Fix platform-specific path separators in tests
- Remove no-op onChange handler
- Replace hard-coded colors with design-system tokens
- Optimize resolveDefaultSiteDirectory calls
- Add error handling for loadUserData

Author: mikaoelitiana

apps/studio/src/components/form-path-input.tsx

@@ -1,4 +1,3 @@
-import { __ } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
 import FolderIcon from 'src/components/folder-icon';
 import { cx } from 'src/lib/cx';
@@ -12,18 +11,18 @@ export interface FormPathInputComponentProps {
 	id?: string;
 }
 
-export function FormPathInputComponent( {
+export function FormPathInputComponent({
 	value,
 	onClick,
 	error,
 	doesPathContainWordPress,
 	id,
-}: FormPathInputComponentProps ) {
+}: FormPathInputComponentProps) {
 	const { __ } = useI18n();
 	return (
 		<div className="flex flex-col gap-2">
 			<button
-				aria-invalid={ !! error }
+				aria-invalid={!!error}
 				/**
 				 * The below `aria-describedby` presumes the error message always
 				 * relates to the local path input, which is true currently as it is the
@@ -32,41 +31,36 @@ export function FormPathInputComponent( {
 				 * `aria-describedby` attribute so that it only targets relevant error
 				 * messages.
 				 */
-				aria-describedby={ error ? 'site-path-error' : undefined }
+				aria-describedby={error ? 'site-path-error' : undefined}
 				type="button"
-				aria-label={ `${ value }, ${ __( 'Select different local path' ) }` }
-				className={ cx(
-					'flex flex-row items-stretch rounded-sm border border-[#949494] focus:border-a8c-blue-50 focus:shadow-[0_0_0_0.5px_black] focus:shadow-a8c-blue-50 outline-none transition-shadow transition-linear duration-100 [&_.local-path-icon]:focus:border-l-a8c-blue-50 [&:disabled]:cursor-not-allowed',
+				aria-label={`${value}, ${__('Select different local path')}`}
+				className={cx(
+					'flex flex-row items-stretch rounded-sm border border-frame-border focus:border-frame-theme focus:shadow-[0_0_0_0.5px] focus:shadow-a8c-blue-50 outline-none transition-shadow transition-linear duration-100 [&_.local-path-icon]:focus:border-l-frame-theme [&:disabled]:cursor-not-allowed',
 					error && 'border-red-500 [&_.local-path-icon]:border-l-red-500'
-				) }
+				)}
 				data-testid="select-path-button"
-				onClick={ onClick }
-				id={ id }
+				onClick={onClick}
+				id={id}
 			>
-				<div
-					aria-hidden="true"
-					tabIndex={ -1 }
-					className="w-full text-left pl-3 py-3 min-h-10"
-					onChange={ () => {} }
-				>
-					{ value }
+				<div aria-hidden="true" tabIndex={-1} className="w-full text-left pl-3 py-3 min-h-10">
+					{value}
 				</div>
 				<div
 					aria-hidden="true"
 					className="local-path-icon flex items-center py-[9px] px-2.5 self-center"
 				>
-					<FolderIcon className="text-[#3C434A]" />
+					<FolderIcon className="text-frame-text-secondary" />
 				</div>
 			</button>
 			<SiteFormError
-				error={ error }
+				error={error}
 				tipMessage={
 					doesPathContainWordPress
-						? __( 'The existing WordPress site at this path will be added.' )
+						? __('The existing WordPress site at this path will be added.')
 						: ''
 				}
 			/>
-			<input type="hidden" data-testid="local-path-input" value={ value } />
+			<input type="hidden" data-testid="local-path-input" value={value} />
 		</div>
 	);
 }

apps/studio/src/components/site-form-error.tsx

@@ -1,5 +1,4 @@
 import { Icon } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 import { cautionFilled, tip } from '@wordpress/icons';
 import { cx } from 'src/lib/cx';
 
@@ -9,26 +8,26 @@ export interface SiteFormErrorProps {
 	className?: string;
 }
 
-export const SiteFormError = ( { error, tipMessage = '', className = '' }: SiteFormErrorProps ) => {
+export const SiteFormError = ({ error, tipMessage = '', className = '' }: SiteFormErrorProps) => {
 	return (
-		( error || tipMessage ) && (
+		(error || tipMessage) && (
 			<div
-				id={ error ? 'error-message' : 'tip-message' }
+				id="site-path-error"
 				role="alert"
 				aria-atomic="true"
-				className={ cx(
+				className={cx(
 					'flex items-start gap-1 text-xs',
-					error ? 'text-red-500' : 'text-a8c-gray-50',
+					error ? 'text-red-500' : 'text-frame-text-secondary',
 					className
-				) }
+				)}
 			>
 				<Icon
-					className={ cx( 'shrink-0 basis-4', error ? 'fill-red-500' : 'fill-a8c-gray-50' ) }
-					icon={ error ? cautionFilled : tip }
-					width={ 16 }
-					height={ 16 }
+					className={cx('shrink-0 basis-4', error ? 'fill-red-500' : 'fill-frame-text-secondary')}
+					icon={error ? cautionFilled : tip}
+					width={16}
+					height={16}
 				/>
-				<p>{ error ? error : __( tipMessage ) }</p>
+				<p>{error ? error : tipMessage}</p>
 			</div>
 		)
 	);