Fix labelling, description, and focus style of the block transform to…

… pattern previews (#50577)

* Set ARIA attributes on the correct element.

* Fix pattern previews focus style and width.

packages/block-editor/src/components/block-switcher/pattern-transformations-menu.js

@@ -105,15 +105,15 @@ function BlockPattern( { pattern, onSelect, composite } ) {
 		`${ baseClassName }-list__item-description`
 	);
 	return (
-		<div
-			className={ `${ baseClassName }-list__list-item` }
-			aria-label={ pattern.title }
-			aria-describedby={ pattern.description ? descriptionId : undefined }
-		>
+		<div className={ `${ baseClassName }-list__list-item` }>
 			<CompositeItem
 				role="option"
 				as="div"
 				{ ...composite }
+				aria-label={ pattern.title }
+				aria-describedby={
+					pattern.description ? descriptionId : undefined
+				}
 				className={ `${ baseClassName }-list__item` }
 				onClick={ () => onSelect( pattern.transformedBlocks ) }
 			>

packages/block-editor/src/components/block-switcher/style.scss

@@ -109,19 +109,20 @@
 	}
 
 	.components-popover__content {
-		box-shadow: none;
+		width: 300px;
 		border: $border-width solid $gray-900;
 		background: $white;
 		border-radius: $radius-block-ui;
 		outline: none;
+		box-shadow: none;
 	}
 
 	.block-editor-block-switcher__preview {
-		width: 300px;
-		height: auto;
-		// Subtract margin from max-height.
+		// Subtract vertical margin from max-height.
 		max-height: calc(500px - #{$grid-unit-40});
-		margin: $grid-unit-20;
+		margin: $grid-unit-20 0;
+		// Use padding to prevent the pattern previews focus style from being cut-off.
+		padding: 0 $grid-unit-20;
 		overflow: hidden;
 	}
 }