Unwrap custom dataviews empty element from paragraph tags

The custom empty element can be anything arbitrary, including divs and
headings. These elements are not semantically allowed to be children of
paragraphs.

The spinner continues to be wrapped in a paragraph. This is allowed
semantically (the spinner is just an <svg> element), it keeps the
vertical margins of the spinner consistent with the default empty
message, and it is consistent with the spinners which show when the
dataviews are loading more data in infinite scroll mode.

Author: p-jackson

packages/dataviews/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Breaking changes
 
 - Remove `boolean` form control. Fields using `Edit: 'boolean'` must now use `Edit: 'checkbox'` or `Edit: 'toggle'` instead. Boolean field types now use checkboxes by default. [#71505](https://github.com/WordPress/gutenberg/pull/71505)
+- DataViews: Custom `empty` elements are no longer wrapped in `<p>` tags to improve accessibility. [#71561](https://github.com/WordPress/gutenberg/pull/71561)
 
 ### Features
 

packages/dataviews/README.md

@@ -426,7 +426,7 @@ Optional. Pass an object with a list of `perPageSizes` to control the available
 
 #### `empty`: React node
 
-A message or element to be displayed instead of the dataview's default empty message.
+An element to display when the `data` prop is empty. Defaults to `<p>No results</p>`.
 
 ### Composition modes
 

packages/dataviews/src/components/dataviews-layout/index.tsx

@@ -37,7 +37,7 @@ export default function DataViewsLayout( { className }: DataViewsLayoutProps ) {
 		isItemClickable,
 		renderItemLink,
 		defaultLayouts,
-		empty = __( 'No results' ),
+		empty = <p>{ __( 'No results' ) }</p>,
 	} = useContext( DataViewsContext );
 
 	const ViewComponent = VIEW_LAYOUTS.find(

packages/dataviews/src/components/dataviews/stories/index.story.tsx

@@ -155,7 +155,7 @@ export const CustomEmpty = () => {
 			onChangeView={ setView }
 			actions={ actions }
 			defaultLayouts={ defaultLayouts }
-			empty={ view.search ? 'No sites found' : 'No sites' }
+			empty={ <p>{ view.search ? 'No sites found' : 'No sites' }</p> }
 		/>
 	);
 };

packages/dataviews/src/dataviews-layouts/grid/index.tsx

@@ -474,7 +474,13 @@ function ViewGrid< Item >( {
 							'dataviews-no-results': ! isLoading,
 						} ) }
 					>
-						<p>{ isLoading ? <Spinner /> : empty }</p>
+						{ isLoading ? (
+							<p>
+								<Spinner />
+							</p>
+						) : (
+							empty
+						) }
 					</div>
 				)
 			}

packages/dataviews/src/dataviews-layouts/list/index.tsx

@@ -512,7 +512,14 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 					'dataviews-no-results': ! hasData && ! isLoading,
 				} ) }
 			>
-				{ ! hasData && <p>{ isLoading ? <Spinner /> : empty }</p> }
+				{ ! hasData &&
+					( isLoading ? (
+						<p>
+							<Spinner />
+						</p>
+					) : (
+						empty
+					) ) }
 			</div>
 		);
 	}

packages/dataviews/src/dataviews-layouts/picker-grid/index.tsx

@@ -474,7 +474,13 @@ function ViewPickerGrid< Item >( {
 							'dataviews-no-results': ! isLoading,
 						} ) }
 					>
-						<p>{ isLoading ? <Spinner /> : empty }</p>
+						{ isLoading ? (
+							<p>
+								<Spinner />
+							</p>
+						) : (
+							empty
+						) }
 					</div>
 				)
 			}

packages/dataviews/src/dataviews-layouts/table/index.tsx

@@ -578,7 +578,14 @@ function ViewTable< Item >( {
 				} ) }
 				id={ tableNoticeId }
 			>
-				{ ! hasData && <p>{ isLoading ? <Spinner /> : empty }</p> }
+				{ ! hasData &&
+					( isLoading ? (
+						<p>
+							<Spinner />
+						</p>
+					) : (
+						empty
+					) ) }
 				{ hasData && isLoading && (
 					<p className="dataviews-loading-more">
 						<Spinner />