From 72270c155e0518e89828e76145625fafdcd3ace1 Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Tue, 17 Oct 2023 18:04:19 +0100
Subject: [PATCH 1/5] Migrating `BlockPatternSetup`

 - Removes `__unstableComposite` imports from `@wordpress/components`
 - Adds private `Composite*` exports from `@wordpress/components`
 - Refactors `BlockPatternSetup` and subcomponents to use updated `Composite` components
 - Additionally rewords UX to improve keyboard/AT experience
---
 .../components/block-pattern-setup/index.js   | 214 ++++++++++++------
 .../block-pattern-setup/setup-toolbar.js      |   4 +-
 .../components/block-pattern-setup/style.scss |  12 +-
 3 files changed, 163 insertions(+), 67 deletions(-)

diff --git a/packages/block-editor/src/components/block-pattern-setup/index.js b/packages/block-editor/src/components/block-pattern-setup/index.js
index 22d51466b3b6e..5d35a003ff8c6 100644
--- a/packages/block-editor/src/components/block-pattern-setup/index.js
+++ b/packages/block-editor/src/components/block-pattern-setup/index.js
@@ -5,9 +5,7 @@ import { useDispatch } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
 import {
 	VisuallyHidden,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
 import { useState } from '@wordpress/element';
@@ -22,43 +20,106 @@ import BlockPreview from '../block-preview';
 import SetupToolbar from './setup-toolbar';
 import usePatternsSetup from './use-patterns-setup';
 import { VIEWMODES } from './constants';
+import { unlock } from '../../lock-unlock';
+
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
 
 const SetupContent = ( {
 	viewMode,
 	activeSlide,
 	patterns,
+	onChangeSlide,
 	onBlockPatternSelect,
 	showTitles,
 } ) => {
-	const composite = useCompositeState();
 	const containerClass = 'block-editor-block-pattern-setup__container';
-	if ( viewMode === VIEWMODES.carousel ) {
-		const slideClass = new Map( [
-			[ activeSlide, 'active-slide' ],
-			[ activeSlide - 1, 'previous-slide' ],
-			[ activeSlide + 1, 'next-slide' ],
-		] );
-		return (
-			<div className="block-editor-block-pattern-setup__carousel">
-				<div className={ containerClass }>
-					<ul className="carousel-container">
-						{ patterns.map( ( pattern, index ) => (
-							<BlockPatternSlide
-								className={ slideClass.get( index ) || '' }
-								key={ pattern.name }
-								pattern={ pattern }
-							/>
-						) ) }
-					</ul>
+	const commonProps = { containerClass, patterns };
+
+	return viewMode === VIEWMODES.carousel ? (
+		<SetupContentAsCarousel
+			{ ...commonProps }
+			activeSlide={ activeSlide }
+			onChangeSlide={ onChangeSlide }
+		/>
+	) : (
+		<SetupContentAsGrid
+			{ ...commonProps }
+			onBlockPatternSelect={ onBlockPatternSelect }
+			showTitles={ showTitles }
+		/>
+	);
+};
+
+function SetupContentAsCarousel( {
+	containerClass,
+	patterns,
+	activeSlide,
+	onChangeSlide,
+} ) {
+	const activeId = `block-editor-block-pattern-setup__carousel__${ patterns[ activeSlide ].name }__tab`;
+	const composite = useCompositeStore( {
+		defaultActiveId: activeId,
+		orientation: 'horizontal',
+	} );
+	composite.setActiveId( activeId );
+	const slideClass = new Map( [
+		[ activeSlide, 'active-slide' ],
+		[ activeSlide - 1, 'previous-slide' ],
+		[ activeSlide + 1, 'next-slide' ],
+	] );
+
+	return (
+		<div className="block-editor-block-pattern-setup__carousel">
+			<div className={ containerClass }>
+				<div className="carousel-container">
+					<Composite store={ composite } role="tablist">
+						<VisuallyHidden>
+							{ patterns.map( ( pattern, index ) => (
+								<CompositeItem
+									key={ pattern.name }
+									role="tab"
+									id={ `block-editor-block-pattern-setup__carousel__${ pattern.name }__tab` }
+									aria-controls={ `block-editor-block-pattern-setup__carousel__${ pattern.name }` }
+									onClick={ () => onChangeSlide( index ) }
+									onFocus={ () => onChangeSlide( index ) }
+								>
+									{ pattern.title }
+								</CompositeItem>
+							) ) }
+						</VisuallyHidden>
+					</Composite>
+					{ patterns.map( ( pattern, index ) => (
+						<BlockPatternSlide
+							className={ slideClass.get( index ) || '' }
+							key={ pattern.name }
+							pattern={ pattern }
+							id={ `block-editor-block-pattern-setup__carousel__${ pattern.name }` }
+							aria-hidden={ activeSlide !== index }
+						/>
+					) ) }
 				</div>
 			</div>
-		);
-	}
+		</div>
+	);
+}
+
+function SetupContentAsGrid( {
+	containerClass,
+	patterns,
+	onBlockPatternSelect,
+	showTitles,
+} ) {
+	const composite = useCompositeStore( { orientation: 'vertical' } );
+
 	return (
 		<div className="block-editor-block-pattern-setup__grid">
 			<Composite
-				{ ...composite }
-				role="listbox"
+				store={ composite }
+				role="list"
 				className={ containerClass }
 				aria-label={ __( 'Patterns list' ) }
 			>
@@ -67,16 +128,15 @@ const SetupContent = ( {
 						key={ pattern.name }
 						pattern={ pattern }
 						onSelect={ onBlockPatternSelect }
-						composite={ composite }
 						showTitles={ showTitles }
 					/>
 				) ) }
 			</Composite>
 		</div>
 	);
-};
+}
 
-function BlockPattern( { pattern, onSelect, composite, showTitles } ) {
+function BlockPattern( { pattern, onSelect, showTitles } ) {
 	const baseClassName = 'block-editor-block-pattern-setup-list';
 	const { blocks, description, viewportWidth = 700 } = pattern;
 	const descriptionId = useInstanceId(
@@ -84,56 +144,70 @@ function BlockPattern( { pattern, onSelect, composite, showTitles } ) {
 		`${ baseClassName }__item-description`
 	);
 	return (
-		<div
-			className={ `${ baseClassName }__list-item` }
-			aria-label={ pattern.title }
-			aria-describedby={ pattern.description ? descriptionId : undefined }
-		>
+		<div className={ `${ baseClassName }__list-item` } role="listitem">
 			<CompositeItem
-				role="option"
-				as="div"
-				{ ...composite }
+				role="button"
+				render={ <div /> }
 				className={ `${ baseClassName }__item` }
 				onClick={ () => onSelect( blocks ) }
 			>
-				<BlockPreview
-					blocks={ blocks }
-					viewportWidth={ viewportWidth }
-				/>
-				{ showTitles && (
-					<div className={ `${ baseClassName }__item-title` }>
-						{ pattern.title }
-					</div>
-				) }
-				{ !! description && (
-					<VisuallyHidden id={ descriptionId }>
-						{ description }
-					</VisuallyHidden>
-				) }
+				<div
+					role="img"
+					aria-label={ pattern.title }
+					aria-describedby={
+						pattern.description ? descriptionId : undefined
+					}
+				>
+					<BlockPreview
+						blocks={ blocks }
+						viewportWidth={ viewportWidth }
+					/>
+					{ showTitles && (
+						<div className={ `${ baseClassName }__item-title` }>
+							{ pattern.title }
+						</div>
+					) }
+					{ !! description && (
+						<VisuallyHidden id={ descriptionId }>
+							{ description }
+						</VisuallyHidden>
+					) }
+				</div>
 			</CompositeItem>
 		</div>
 	);
 }
 
-function BlockPatternSlide( { className, pattern, minHeight } ) {
+function BlockPatternSlide( {
+	className,
+	pattern,
+	minHeight,
+	...additionalProps
+} ) {
 	const { blocks, title, description } = pattern;
 	const descriptionId = useInstanceId(
 		BlockPatternSlide,
 		'block-editor-block-pattern-setup-list__item-description'
 	);
 	return (
-		<li
+		<div
+			{ ...additionalProps }
 			className={ `pattern-slide ${ className }` }
-			aria-label={ title }
-			aria-describedby={ description ? descriptionId : undefined }
+			role="tabpanel"
 		>
-			<BlockPreview blocks={ blocks } minHeight={ minHeight } />
-			{ !! description && (
-				<VisuallyHidden id={ descriptionId }>
-					{ description }
-				</VisuallyHidden>
-			) }
-		</li>
+			<div
+				role="img"
+				aria-label={ title }
+				aria-describedby={ description ? descriptionId : undefined }
+			>
+				<BlockPreview blocks={ blocks } minHeight={ minHeight } />
+				{ !! description && (
+					<VisuallyHidden id={ descriptionId }>
+						{ description }
+					</VisuallyHidden>
+				) }
+			</div>
+		</div>
 	);
 }
 
@@ -170,6 +244,14 @@ const BlockPatternSetup = ( {
 					activeSlide={ activeSlide }
 					patterns={ patterns }
 					onBlockPatternSelect={ onPatternSelectCallback }
+					onChangeSlide={ ( newSlide ) => {
+						setActiveSlide(
+							Math.min(
+								Math.max( newSlide, 0 ),
+								patterns.length - 1
+							)
+						);
+					} }
 					showTitles={ showTitles }
 				/>
 				<SetupToolbar
@@ -178,10 +260,14 @@ const BlockPatternSetup = ( {
 					activeSlide={ activeSlide }
 					totalSlides={ patterns.length }
 					handleNext={ () => {
-						setActiveSlide( ( active ) => active + 1 );
+						setActiveSlide( ( active ) =>
+							Math.min( active + 1, patterns.length - 1 )
+						);
 					} }
 					handlePrevious={ () => {
-						setActiveSlide( ( active ) => active - 1 );
+						setActiveSlide( ( active ) =>
+							Math.max( active - 1, 0 )
+						);
 					} }
 					onBlockPatternSelect={ () => {
 						onPatternSelectCallback(
diff --git a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
index 69922f9560ab0..dae0fc1f3b896 100644
--- a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
+++ b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
@@ -34,13 +34,13 @@ const CarouselNavigation = ( {
 			icon={ chevronLeft }
 			label={ __( 'Previous pattern' ) }
 			onClick={ handlePrevious }
-			disabled={ activeSlide === 0 }
+			aria-disabled={ activeSlide === 0 }
 		/>
 		<Button
 			icon={ chevronRight }
 			label={ __( 'Next pattern' ) }
 			onClick={ handleNext }
-			disabled={ activeSlide === totalSlides - 1 }
+			aria-disabled={ activeSlide === totalSlides - 1 }
 		/>
 	</div>
 );
diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss
index 792e6872a2d59..e6a064b7ec219 100644
--- a/packages/block-editor/src/components/block-pattern-setup/style.scss
+++ b/packages/block-editor/src/components/block-pattern-setup/style.scss
@@ -85,7 +85,7 @@
 		align-items: center;
 		justify-content: space-between;
 		border-top: 1px solid $gray-300;
-		align-self: flex-end;
+		align-self: stretch;
 
 		.block-editor-block-pattern-setup__display-controls {
 			display: flex;
@@ -146,6 +146,16 @@
 					z-index: z-index(".block-editor-block-pattern-setup .{next,previous}-slide");
 				}
 			}
+			[role="tablist"]:focus-within {
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				z-index: 110;
+				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+				outline: 3px solid transparent;
+			}
 		}
 
 		.block-list-appender {

From 01ad51626819840ef85b83fd7e30d2cf3d2fb3bf Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Thu, 16 Nov 2023 19:14:06 +0000
Subject: [PATCH 2/5] Restoring much of the original code

---
 .../components/block-pattern-setup/index.js   | 194 ++++++------------
 1 file changed, 62 insertions(+), 132 deletions(-)

diff --git a/packages/block-editor/src/components/block-pattern-setup/index.js b/packages/block-editor/src/components/block-pattern-setup/index.js
index 5d35a003ff8c6..edd55e90dc3e2 100644
--- a/packages/block-editor/src/components/block-pattern-setup/index.js
+++ b/packages/block-editor/src/components/block-pattern-setup/index.js
@@ -32,94 +32,41 @@ const SetupContent = ( {
 	viewMode,
 	activeSlide,
 	patterns,
-	onChangeSlide,
 	onBlockPatternSelect,
 	showTitles,
 } ) => {
+	const compositeStore = useCompositeStore();
 	const containerClass = 'block-editor-block-pattern-setup__container';
-	const commonProps = { containerClass, patterns };
 
-	return viewMode === VIEWMODES.carousel ? (
-		<SetupContentAsCarousel
-			{ ...commonProps }
-			activeSlide={ activeSlide }
-			onChangeSlide={ onChangeSlide }
-		/>
-	) : (
-		<SetupContentAsGrid
-			{ ...commonProps }
-			onBlockPatternSelect={ onBlockPatternSelect }
-			showTitles={ showTitles }
-		/>
-	);
-};
-
-function SetupContentAsCarousel( {
-	containerClass,
-	patterns,
-	activeSlide,
-	onChangeSlide,
-} ) {
-	const activeId = `block-editor-block-pattern-setup__carousel__${ patterns[ activeSlide ].name }__tab`;
-	const composite = useCompositeStore( {
-		defaultActiveId: activeId,
-		orientation: 'horizontal',
-	} );
-	composite.setActiveId( activeId );
-	const slideClass = new Map( [
-		[ activeSlide, 'active-slide' ],
-		[ activeSlide - 1, 'previous-slide' ],
-		[ activeSlide + 1, 'next-slide' ],
-	] );
-
-	return (
-		<div className="block-editor-block-pattern-setup__carousel">
-			<div className={ containerClass }>
-				<div className="carousel-container">
-					<Composite store={ composite } role="tablist">
-						<VisuallyHidden>
-							{ patterns.map( ( pattern, index ) => (
-								<CompositeItem
-									key={ pattern.name }
-									role="tab"
-									id={ `block-editor-block-pattern-setup__carousel__${ pattern.name }__tab` }
-									aria-controls={ `block-editor-block-pattern-setup__carousel__${ pattern.name }` }
-									onClick={ () => onChangeSlide( index ) }
-									onFocus={ () => onChangeSlide( index ) }
-								>
-									{ pattern.title }
-								</CompositeItem>
-							) ) }
-						</VisuallyHidden>
-					</Composite>
-					{ patterns.map( ( pattern, index ) => (
-						<BlockPatternSlide
-							className={ slideClass.get( index ) || '' }
-							key={ pattern.name }
-							pattern={ pattern }
-							id={ `block-editor-block-pattern-setup__carousel__${ pattern.name }` }
-							aria-hidden={ activeSlide !== index }
-						/>
-					) ) }
+	if ( viewMode === VIEWMODES.carousel ) {
+		const slideClass = new Map( [
+			[ activeSlide, 'active-slide' ],
+			[ activeSlide - 1, 'previous-slide' ],
+			[ activeSlide + 1, 'next-slide' ],
+		] );
+		return (
+			<div className="block-editor-block-pattern-setup__carousel">
+				<div className={ containerClass }>
+					<div className="carousel-container">
+						{ patterns.map( ( pattern, index ) => (
+							<BlockPatternSlide
+								active={ index === activeSlide }
+								className={ slideClass.get( index ) || '' }
+								key={ pattern.name }
+								pattern={ pattern }
+							/>
+						) ) }
+					</div>
 				</div>
 			</div>
-		</div>
-	);
-}
-
-function SetupContentAsGrid( {
-	containerClass,
-	patterns,
-	onBlockPatternSelect,
-	showTitles,
-} ) {
-	const composite = useCompositeStore( { orientation: 'vertical' } );
+		);
+	}
 
 	return (
 		<div className="block-editor-block-pattern-setup__grid">
 			<Composite
-				store={ composite }
-				role="list"
+				store={ compositeStore }
+				role="listbox"
 				className={ containerClass }
 				aria-label={ __( 'Patterns list' ) }
 			>
@@ -134,7 +81,7 @@ function SetupContentAsGrid( {
 			</Composite>
 		</div>
 	);
-}
+};
 
 function BlockPattern( { pattern, onSelect, showTitles } ) {
 	const baseClassName = 'block-editor-block-pattern-setup-list';
@@ -144,46 +91,41 @@ function BlockPattern( { pattern, onSelect, showTitles } ) {
 		`${ baseClassName }__item-description`
 	);
 	return (
-		<div className={ `${ baseClassName }__list-item` } role="listitem">
+		<div className={ `${ baseClassName }__list-item` }>
 			<CompositeItem
-				role="button"
-				render={ <div /> }
-				className={ `${ baseClassName }__item` }
+				render={
+					<div
+						aria-describedby={
+							description ? descriptionId : undefined
+						}
+						aria-label={ pattern.title }
+						className={ `${ baseClassName }__item` }
+					/>
+				}
+				id={ `${ baseClassName }__pattern__${ pattern.name }` }
+				role="option"
 				onClick={ () => onSelect( blocks ) }
 			>
-				<div
-					role="img"
-					aria-label={ pattern.title }
-					aria-describedby={
-						pattern.description ? descriptionId : undefined
-					}
-				>
-					<BlockPreview
-						blocks={ blocks }
-						viewportWidth={ viewportWidth }
-					/>
-					{ showTitles && (
-						<div className={ `${ baseClassName }__item-title` }>
-							{ pattern.title }
-						</div>
-					) }
-					{ !! description && (
-						<VisuallyHidden id={ descriptionId }>
-							{ description }
-						</VisuallyHidden>
-					) }
-				</div>
+				<BlockPreview
+					blocks={ blocks }
+					viewportWidth={ viewportWidth }
+				/>
+				{ showTitles && (
+					<div className={ `${ baseClassName }__item-title` }>
+						{ pattern.title }
+					</div>
+				) }
+				{ !! description && (
+					<VisuallyHidden id={ descriptionId }>
+						{ description }
+					</VisuallyHidden>
+				) }
 			</CompositeItem>
 		</div>
 	);
 }
 
-function BlockPatternSlide( {
-	className,
-	pattern,
-	minHeight,
-	...additionalProps
-} ) {
+function BlockPatternSlide( { active, className, pattern, minHeight } ) {
 	const { blocks, title, description } = pattern;
 	const descriptionId = useInstanceId(
 		BlockPatternSlide,
@@ -191,22 +133,18 @@ function BlockPatternSlide( {
 	);
 	return (
 		<div
-			{ ...additionalProps }
+			aria-hidden={ ! active }
+			role="img"
 			className={ `pattern-slide ${ className }` }
-			role="tabpanel"
+			aria-label={ title }
+			aria-describedby={ description ? descriptionId : undefined }
 		>
-			<div
-				role="img"
-				aria-label={ title }
-				aria-describedby={ description ? descriptionId : undefined }
-			>
-				<BlockPreview blocks={ blocks } minHeight={ minHeight } />
-				{ !! description && (
-					<VisuallyHidden id={ descriptionId }>
-						{ description }
-					</VisuallyHidden>
-				) }
-			</div>
+			<BlockPreview blocks={ blocks } minHeight={ minHeight } />
+			{ !! description && (
+				<VisuallyHidden id={ descriptionId }>
+					{ description }
+				</VisuallyHidden>
+			) }
 		</div>
 	);
 }
@@ -244,14 +182,6 @@ const BlockPatternSetup = ( {
 					activeSlide={ activeSlide }
 					patterns={ patterns }
 					onBlockPatternSelect={ onPatternSelectCallback }
-					onChangeSlide={ ( newSlide ) => {
-						setActiveSlide(
-							Math.min(
-								Math.max( newSlide, 0 ),
-								patterns.length - 1
-							)
-						);
-					} }
 					showTitles={ showTitles }
 				/>
 				<SetupToolbar

From d4cb67ccc0867b6dc27dc4c607c0906ecd2472c8 Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Thu, 16 Nov 2023 19:15:18 +0000
Subject: [PATCH 3/5] Adding scroll-margin to list items

---
 .../block-editor/src/components/block-pattern-setup/style.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss
index e6a064b7ec219..4a006fa34ee9b 100644
--- a/packages/block-editor/src/components/block-pattern-setup/style.scss
+++ b/packages/block-editor/src/components/block-pattern-setup/style.scss
@@ -32,6 +32,8 @@
 			}
 
 			.block-editor-block-pattern-setup-list__item {
+				scroll-margin: 5px 0;
+
 				&:hover .block-editor-block-preview__container {
 					box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 				}
@@ -44,6 +46,7 @@
 					color: var(--wp-admin-theme-color);
 				}
 			}
+
 			.block-editor-block-pattern-setup-list__list-item {
 				break-inside: avoid-column;
 				margin-bottom: $grid-unit-30;

From 8969e9dc1ae9adf9ade02fa254d9ae44a10dc7f3 Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Thu, 16 Nov 2023 19:57:13 +0000
Subject: [PATCH 4/5] Removing redundant CSS

---
 .../src/components/block-pattern-setup/style.scss      | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/packages/block-editor/src/components/block-pattern-setup/style.scss b/packages/block-editor/src/components/block-pattern-setup/style.scss
index 4a006fa34ee9b..3474eed5be517 100644
--- a/packages/block-editor/src/components/block-pattern-setup/style.scss
+++ b/packages/block-editor/src/components/block-pattern-setup/style.scss
@@ -149,16 +149,6 @@
 					z-index: z-index(".block-editor-block-pattern-setup .{next,previous}-slide");
 				}
 			}
-			[role="tablist"]:focus-within {
-				position: absolute;
-				top: 0;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				z-index: 110;
-				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-				outline: 3px solid transparent;
-			}
 		}
 
 		.block-list-appender {

From ebad31e942ec6e4dc87d0c5107876b0b97d67534 Mon Sep 17 00:00:00 2001
From: Andrew Hayward <andrew.hayward@automattic.com>
Date: Thu, 16 Nov 2023 20:24:26 +0000
Subject: [PATCH 5/5] Using `__experimentalIsFocusable`

---
 .../src/components/block-pattern-setup/setup-toolbar.js     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
index dae0fc1f3b896..91b68456cda71 100644
--- a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
+++ b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
@@ -34,13 +34,15 @@ const CarouselNavigation = ( {
 			icon={ chevronLeft }
 			label={ __( 'Previous pattern' ) }
 			onClick={ handlePrevious }
-			aria-disabled={ activeSlide === 0 }
+			disabled={ activeSlide === 0 }
+			__experimentalIsFocusable
 		/>
 		<Button
 			icon={ chevronRight }
 			label={ __( 'Next pattern' ) }
 			onClick={ handleNext }
-			aria-disabled={ activeSlide === totalSlides - 1 }
+			disabled={ activeSlide === totalSlides - 1 }
+			__experimentalIsFocusable
 		/>
 	</div>
 );