Use list role instead of listbox

WordPress · Sep 27, 2023 · 0f4784e · 0f4784e
1 parent 16e11d4
commit 0f4784e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/packages/edit-site/src/components/page-patterns/grid.js b/packages/edit-site/src/components/page-patterns/grid.js
@@ -9,7 +9,7 @@ export default function Grid( { categoryId, items, ...props } ) {
 	}
 
 	return (
-		<ul role="listbox" className="edit-site-patterns__grid" { ...props }>
+		<ul className="edit-site-patterns__grid" { ...props }>
 			{ items.map( ( item ) => (
 				<GridItem
 					key={ item.name }

diff --git a/test/e2e/specs/site-editor/patterns.spec.js b/test/e2e/specs/site-editor/patterns.spec.js
@@ -88,27 +88,28 @@ test.describe( 'Patterns', () => {
 
 		await expect(
 			navigation.getByRole( 'button', { name: 'All patterns' } )
-		).toBeVisible();
+		).toContainText( '1' );
 		await expect(
 			navigation.getByRole( 'button', { name: 'My patterns' } )
-		).toBeVisible();
+		).toContainText( '1' );
 		await expect(
 			navigation.getByRole( 'button', { name: 'Uncategorized' } )
-		).toBeVisible();
+		).toContainText( '1' );
 
 		await expect(
 			patternsContent.getByRole( 'heading', {
 				name: 'All patterns',
 				level: 2,
 			} )
 		).toBeVisible();
+		const patternsList = patternsContent.getByRole( 'list', {
+			name: 'All patterns',
+		} );
+		await expect( patternsList.getByRole( 'listitem' ) ).toHaveCount( 1 );
 		await expect(
-			patternsContent
-				.getByRole( 'listbox', { name: 'All patterns' } )
-				// TODO: should be `getByRole( 'option', { name: 'My pattern' } )`
+			patternsList
+				.getByRole( 'heading', { name: 'My pattern' } )
 				.getByRole( 'button', { name: 'My pattern', exact: true } )
-				// TODO: Shouldn't need this.
-				.nth( 0 )
 		).toBeVisible();
 	} );
 } );