diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx
index fd6cdff6dbcdc6..960865164fd6c1 100644
--- 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 (
}
+ render={
}
role="row"
className={ clsx( {
'is-selected': isSelected,
@@ -482,7 +482,7 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
return (
}
+ render={ }
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
index 82ef269d46964e..e892006faecb00 100644
--- 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;