Dataviews List layout: do not use grid role on a ul element. (WordP…

…ress#67849) Co-authored-by: jorgefilipecosta <[email protected]> Co-authored-by: oandregal <[email protected]>
MaxMood96 · Dec 15, 2024 · 7376988 · 7376988
1 parent 6e85888
commit 7376988
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx
@@ -257,7 +257,7 @@ function ListItem< Item >( {
 	return (
 		<Composite.Row
 			ref={ itemRef }
-			render={ <li /> }
+			render={ <div /> }
 			role="row"
 			className={ clsx( {
 				'is-selected': isSelected,
@@ -482,7 +482,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	return (
 		<Composite
 			id={ baseId }
-			render={ <ul /> }
+			render={ <div /> }
 			className="dataviews-view-list"
 			role="grid"
 			activeId={ activeCompositeId }

diff --git a/packages/dataviews/src/dataviews-layouts/list/style.scss b/packages/dataviews/src/dataviews-layouts/list/style.scss
@@ -1,11 +1,11 @@
-ul.dataviews-view-list {
+div.dataviews-view-list {
 	list-style-type: none;
 }
 
 .dataviews-view-list {
 	margin: 0 0 auto;
 
-	li {
+	div[role="row"] {
 		margin: 0;
 		border-top: 1px solid $gray-100;
 
@@ -45,7 +45,7 @@ ul.dataviews-view-list {
 		&.is-selected.is-selected {
 			border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
 
-			& + li {
+			& + div[role="row"] {
 				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
 			}
 		}
@@ -69,8 +69,8 @@ ul.dataviews-view-list {
 
 	}
 
-	li.is-selected,
-	li.is-selected:focus-within {
+	div[role="row"].is-selected,
+	div[role="row"].is-selected:focus-within {
 		.dataviews-view-list__item-wrapper {
 			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 			color: $gray-900;