diff --git a/packages/edit-site/src/components/page-patterns/grid-item.js b/packages/edit-site/src/components/page-patterns/grid-item.js
index d8e3b2fe16d532..b78c58f5a25724 100644
--- a/packages/edit-site/src/components/page-patterns/grid-item.js
+++ b/packages/edit-site/src/components/page-patterns/grid-item.js
@@ -13,7 +13,6 @@ import {
 	MenuGroup,
 	MenuItem,
 	__experimentalHStack as HStack,
-	__unstableCompositeItem as CompositeItem,
 	Tooltip,
 	Flex,
 } from '@wordpress/components';
@@ -31,7 +30,6 @@ import {
 } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
-import { DELETE, BACKSPACE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -65,12 +63,6 @@ function GridItem( { categoryId, item, ...props } ) {
 		categoryType: item.type,
 	} );
 
-	const onKeyDown = ( event ) => {
-		if ( DELETE === event.keyCode || BACKSPACE === event.keyCode ) {
-			setIsDeleteDialogOpen( true );
-		}
-	};
-
 	const isEmpty = ! item.blocks?.length;
 	const patternClassNames = classnames( 'edit-site-patterns__pattern', {
 		'is-placeholder': isEmpty,
@@ -137,129 +129,120 @@ function GridItem( { categoryId, item, ...props } ) {
 		  );
 
 	return (
-		<>
-			<div className={ patternClassNames }>
-				<CompositeItem
-					className={ previewClassNames }
-					role="option"
-					as="div"
-					// Even though still incomplete, passing ids helps performance.
-					// @see https://reakit.io/docs/composite/#performance.
-					id={ `edit-site-patterns-${ item.name }` }
-					{ ...props }
-					onClick={ item.type !== PATTERNS ? onClick : undefined }
-					onKeyDown={ isCustomPattern ? onKeyDown : undefined }
-					aria-label={ item.title }
-					aria-describedby={
-						ariaDescriptions.length
-							? ariaDescriptions
-									.map(
-										( _, index ) =>
-											`${ descriptionId }-${ index }`
-									)
-									.join( ' ' )
-							: undefined
-					}
+		<li className={ patternClassNames }>
+			<button
+				className={ previewClassNames }
+				// Even though still incomplete, passing ids helps performance.
+				// @see https://reakit.io/docs/composite/#performance.
+				id={ `edit-site-patterns-${ item.name }` }
+				{ ...props }
+				onClick={ item.type !== PATTERNS ? onClick : undefined }
+				aria-disabled={ item.type !== PATTERNS ? 'false' : 'true' }
+				aria-label={ item.title }
+				aria-describedby={
+					ariaDescriptions.length
+						? ariaDescriptions
+								.map(
+									( _, index ) =>
+										`${ descriptionId }-${ index }`
+								)
+								.join( ' ' )
+						: undefined
+				}
+			>
+				{ isEmpty && __( 'Empty pattern' ) }
+				{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
+			</button>
+			{ ariaDescriptions.map( ( ariaDescription, index ) => (
+				<div
+					key={ index }
+					hidden
+					id={ `${ descriptionId }-${ index }` }
 				>
-					{ isEmpty && __( 'Empty pattern' ) }
-					{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
-				</CompositeItem>
-				{ ariaDescriptions.map( ( ariaDescription, index ) => (
-					<div
-						key={ index }
-						hidden
-						id={ `${ descriptionId }-${ index }` }
-					>
-						{ ariaDescription }
-					</div>
-				) ) }
+					{ ariaDescription }
+				</div>
+			) ) }
+			<HStack
+				className="edit-site-patterns__footer"
+				justify="space-between"
+			>
 				<HStack
-					aria-hidden="true"
-					className="edit-site-patterns__footer"
-					justify="space-between"
+					alignment="center"
+					justify="left"
+					spacing={ 3 }
+					className="edit-site-patterns__pattern-title"
 				>
-					<HStack
-						alignment="center"
-						justify="left"
-						spacing={ 3 }
-						className="edit-site-patterns__pattern-title"
-					>
-						{ itemIcon && (
-							<Icon
-								className="edit-site-patterns__pattern-icon"
-								icon={ itemIcon }
-							/>
-						) }
-						<Flex as="span" gap={ 0 } justify="left">
-							{ item.title }
-							{ item.type === PATTERNS && (
-								<Tooltip
-									position="top center"
-									text={ __(
-										'Theme patterns cannot be edited.'
-									) }
-								>
-									<span className="edit-site-patterns__pattern-lock-icon">
-										<Icon icon={ lockSmall } size={ 24 } />
-									</span>
-								</Tooltip>
-							) }
-						</Flex>
-					</HStack>
-					<DropdownMenu
-						icon={ moreHorizontal }
-						label={ __( 'Actions' ) }
-						className="edit-site-patterns__dropdown"
-						popoverProps={ { placement: 'bottom-end' } }
-						toggleProps={ {
-							className: 'edit-site-patterns__button',
-							isSmall: true,
-							describedBy: sprintf(
-								/* translators: %s: pattern name */
-								__( 'Action menu for %s pattern' ),
-								item.title
-							),
-							// The dropdown menu is not focusable using the
-							// keyboard as this would interfere with the grid's
-							// roving tab index system. Instead, keyboard users
-							// use keyboard shortcuts to trigger actions.
-							tabIndex: -1,
-						} }
-					>
-						{ ( { onClose } ) => (
-							<MenuGroup>
-								{ isCustomPattern && ! hasThemeFile && (
-									<RenameMenuItem
-										item={ item }
-										onClose={ onClose }
-									/>
+					{ itemIcon && (
+						<Icon
+							className="edit-site-patterns__pattern-icon"
+							icon={ itemIcon }
+						/>
+					) }
+					<Flex as="span" gap={ 0 } justify="left">
+						{ item.title }
+						{ item.type === PATTERNS && (
+							<Tooltip
+								position="top center"
+								text={ __(
+									'Theme patterns cannot be edited.'
 								) }
-								<DuplicateMenuItem
-									categoryId={ categoryId }
+							>
+								<span className="edit-site-patterns__pattern-lock-icon">
+									<Icon icon={ lockSmall } size={ 24 } />
+								</span>
+							</Tooltip>
+						) }
+					</Flex>
+				</HStack>
+				<DropdownMenu
+					icon={ moreHorizontal }
+					label={ __( 'Actions' ) }
+					className="edit-site-patterns__dropdown"
+					popoverProps={ { placement: 'bottom-end' } }
+					toggleProps={ {
+						className: 'edit-site-patterns__button',
+						isSmall: true,
+						describedBy: sprintf(
+							/* translators: %s: pattern name */
+							__( 'Action menu for %s pattern' ),
+							item.title
+						),
+					} }
+				>
+					{ ( { onClose } ) => (
+						<MenuGroup>
+							{ isCustomPattern && ! hasThemeFile && (
+								<RenameMenuItem
 									item={ item }
 									onClose={ onClose }
-									label={
-										isNonUserPattern
-											? __( 'Copy to My patterns' )
-											: __( 'Duplicate' )
-									}
 								/>
-								{ isCustomPattern && (
-									<MenuItem
-										onClick={ () =>
-											setIsDeleteDialogOpen( true )
-										}
-									>
-										{ hasThemeFile
-											? __( 'Clear customizations' )
-											: __( 'Delete' ) }
-									</MenuItem>
-								) }
-							</MenuGroup>
-						) }
-					</DropdownMenu>
-				</HStack>
-			</div>
+							) }
+							<DuplicateMenuItem
+								categoryId={ categoryId }
+								item={ item }
+								onClose={ onClose }
+								label={
+									isNonUserPattern
+										? __( 'Copy to My patterns' )
+										: __( 'Duplicate' )
+								}
+							/>
+							{ isCustomPattern && (
+								<MenuItem
+									onClick={ () =>
+										setIsDeleteDialogOpen( true )
+									}
+								>
+									{ hasThemeFile
+										? __( 'Clear customizations' )
+										: __( 'Delete' ) }
+								</MenuItem>
+							) }
+						</MenuGroup>
+					) }
+				</DropdownMenu>
+			</HStack>
+
 			{ isDeleteDialogOpen && (
 				<ConfirmDialog
 					confirmButtonText={ confirmButtonText }
@@ -269,7 +252,7 @@ function GridItem( { categoryId, item, ...props } ) {
 					{ confirmPrompt }
 				</ConfirmDialog>
 			) }
-		</>
+		</li>
 	);
 }
 
diff --git a/packages/edit-site/src/components/page-patterns/grid.js b/packages/edit-site/src/components/page-patterns/grid.js
index b9b7053c112ce6..1902b36982c144 100644
--- a/packages/edit-site/src/components/page-patterns/grid.js
+++ b/packages/edit-site/src/components/page-patterns/grid.js
@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__experimentalText as Text,
-} from '@wordpress/components';
+import { __experimentalText as Text } from '@wordpress/components';
 import { useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -17,7 +13,6 @@ import GridItem from './grid-item';
 const PAGE_SIZE = 100;
 
 export default function Grid( { categoryId, items, ...props } ) {
-	const composite = useCompositeState( { wrap: true } );
 	const gridRef = useRef();
 
 	if ( ! items?.length ) {
@@ -29,8 +24,7 @@ export default function Grid( { categoryId, items, ...props } ) {
 
 	return (
 		<>
-			<Composite
-				{ ...composite }
+			<ul
 				role="listbox"
 				className="edit-site-patterns__grid"
 				{ ...props }
@@ -41,10 +35,9 @@ export default function Grid( { categoryId, items, ...props } ) {
 						key={ item.name }
 						item={ item }
 						categoryId={ categoryId }
-						{ ...composite }
 					/>
 				) ) }
-			</Composite>
+			</ul>
 			{ restLength > 0 && (
 				<Text variant="muted" as="p" align="center">
 					{ sprintf(
diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
index 64dcb61ac1a74d..d6f0b897d0cf2a 100644
--- a/packages/edit-site/src/components/page-patterns/style.scss
+++ b/packages/edit-site/src/components/page-patterns/style.scss
@@ -61,6 +61,12 @@
 	}
 }
 
+.edit-site-patterns__section-header {
+	.screen-reader-shortcut:focus {
+		top: 0;
+	}
+}
+
 .edit-site-patterns__grid {
 	display: grid;
 	grid-template-columns: 1fr;
@@ -77,13 +83,17 @@
 		display: flex;
 		flex-direction: column;
 		.edit-site-patterns__preview {
-			border-radius: $radius-block-ui;
+			box-shadow: none;
+			border: none;
+			padding: 0;
+			background-color: unset;
+			box-sizing: border-box;
+			border-radius: 4px;
 			cursor: pointer;
 			overflow: hidden;
 
 			&:focus {
-				box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
+				box-shadow: inset 0 0 0 0 $white, 0 0 0 2px var(--wp-admin-theme-color);
 				// Windows High Contrast mode will show this outline, but not the box-shadow.
 				outline: 2px solid transparent;
 			}
@@ -91,6 +101,10 @@
 			&.is-inactive {
 				cursor: default;
 			}
+			&.is-inactive:focus {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-800;
+				opacity: 0.8;
+			}
 		}
 
 		.edit-site-patterns__footer,