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;