fixes to coderabbit's qa, prevent previews from having focus

Author: kaeizen

src/components/design-library-list/design-library-list-item.js

@@ -94,6 +94,12 @@ const DesignLibraryListItem = memo( props => {
 		tabIndex: 0,
 		role: 'button',
 		onClick: onClickHost,
+		onKeyDown: e => {
+			if ( e.key === 'Enter' || e.key === ' ' ) {
+				e.preventDefault()
+				onClickHost( e )
+			}
+		},
 	}
 
 	return (

src/components/design-library-list/design-preview.js

@@ -90,6 +90,9 @@ export const DesignPreview = ( {
 
 		setIsLoading( true )
 
+		// Prevent interaction and focus within the preview content
+		wrapper.setAttribute( 'inert', '' )
+
 		const ric = window.requestIdleCallback ? ( cb => window.requestIdleCallback( cb, { timeout: 5000 } ) )
 			: ( cb => setTimeout( cb, designIndex * 20 ) )
 		const sanitizedHTML = safeHTML( blocks )

src/components/design-library-list/editor.scss

@@ -67,10 +67,12 @@
 		right: 0;
 		display: flex;
 		gap: 24px;
+		visibility: hidden;
 
 		.ugb-button-component {
 			width: 100%;
 			justify-content: center;
+			pointer-events: none;
 		}
 	}
 	&:hover {
@@ -81,8 +83,10 @@
 		}
 
 		.stk-block-design__edit-btn-container {
+			visibility: visible;
 			opacity: 1;
 			transition-delay: 1s;
+			pointer-events: initial;
 		}
 	}
 

src/welcome/import-export/index.js

@@ -4,7 +4,7 @@ import './design-library'
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n'
+import { __, sprintf } from '@wordpress/i18n'
 import {
 	Button, Modal, Snackbar, TabPanel,
 } from '@wordpress/components'
@@ -62,20 +62,28 @@ const ImportSettings = ( {
 		}, importedSettings, settings )
 	}, [ importedSettings ] )
 
-	const handleImport = () => {
+	const handleImport = async () => {
 		if ( ! ( 'settings' in importedSettings ) ) {
 			onClose()
 			return
 		}
 
 		if ( Object.keys( errors ).length ) {
 			setNotice( __( 'Failed to import settings.', i18n ) )
+			// eslint-disable-next-line no-console
+			console.error( sprintf( __( 'Stackable: Import error - %s', i18n ), Object.values( errors ).join( '\n' ) ) )
 		} else if ( Object.keys( settingsToSave ).length === 0 ) {
 			setNotice( __( 'No settings imported.', i18n ) )
 		} else {
 			const model = new models.Settings( settingsToSave )
-			model.save()
-			setNotice( __( 'Settings imported successfully.', i18n ) )
+			try {
+				await model.save()
+				setNotice( __( 'Settings imported successfully.', i18n ) )
+			} catch ( e ) {
+				setNotice( __( 'Failed to import settings.', i18n ) )
+				// eslint-disable-next-line no-console
+				console.error( sprintf( __( 'Stackable: Import error - %s', i18n ), e ) )
+			}
 		 }
 
 		onClose()