From 77f9c3dc070a25fed5a6334ef0b42d083a62453b Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Mon, 22 Nov 2021 17:50:18 +0800
Subject: [PATCH] Use table layout in templates list screen (#36707)

* Use table layout

* Add explicit aria roles

* Add comments
---
 .../edit-site/src/components/list/style.scss  | 23 +++---
 .../edit-site/src/components/list/table.js    | 70 +++++++++++--------
 2 files changed, 55 insertions(+), 38 deletions(-)

diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss
index e044aaf052f7f..ca2c989434586 100644
--- a/packages/edit-site/src/components/list/style.scss
+++ b/packages/edit-site/src/components/list/style.scss
@@ -66,7 +66,7 @@
 	margin: 0;
 	overflow: hidden;
 
-	li {
+	tr {
 		display: flex;
 		align-items: center;
 		padding: $grid-unit-20;
@@ -78,36 +78,39 @@
 			padding: $grid-unit-30 $grid-unit-40;
 		}
 
+		// Template.
 		.edit-site-list-table-column:nth-child(1) {
 			width: calc(60% - 36px);
+			flex-grow: 1;
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
 
 			a {
-				display: block;
+				display: inline-block;
 				text-decoration: none;
 				font-weight: 500;
 				margin-bottom: $grid-unit-05;
 			}
 		}
 
+		// Added by.
 		.edit-site-list-table-column:nth-child(2) {
 			width: calc(40% - 36px);
 		}
 
+		// Actions.
 		.edit-site-list-table-column:nth-child(3) {
 			min-width: $button-size;
+			flex-shrink: 0;
 		}
 	}
 
-	li.edit-site-list-table-head {
-		border-bottom: $border-width solid $gray-200;
+	tr.edit-site-list-table-head {
 		font-size: 16px;
-		font-weight: 500;
+		font-weight: 600;
 		text-align: left;
-		color: $black;
+		color: #050505;
 		border-top: none;
-
-		& + li {
-			border-top: 0;
-		}
 	}
 }
diff --git a/packages/edit-site/src/components/list/table.js b/packages/edit-site/src/components/list/table.js
index 87df26fb46549..532be3fb5c455 100644
--- a/packages/edit-site/src/components/list/table.js
+++ b/packages/edit-site/src/components/list/table.js
@@ -6,9 +6,6 @@ import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	VisuallyHidden,
-	FlexItem,
-	__experimentalHStack as HStack,
-	__experimentalHeading as Heading,
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
@@ -77,23 +74,40 @@ export default function Table( { templateType } ) {
 	}
 
 	return (
-		<ul className="edit-site-list-table">
-			<HStack className="edit-site-list-table-head" as="li">
-				<FlexItem className="edit-site-list-table-column">
-					<Heading level={ 4 }>{ __( 'Template' ) }</Heading>
-				</FlexItem>
-				<FlexItem className="edit-site-list-table-column">
-					<Heading level={ 4 }>{ __( 'Added by' ) }</Heading>
-				</FlexItem>
-				<FlexItem className="edit-site-list-table-column">
-					<VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>
-				</FlexItem>
-			</HStack>
+		// These explicit aria roles are needed for Safari.
+		// See https://developer.mozilla.org/en-US/docs/Web/CSS/display#tables
+		<table className="edit-site-list-table" role="table">
+			<thead>
+				<tr className="edit-site-list-table-head" role="row">
+					<th
+						className="edit-site-list-table-column"
+						role="columnheader"
+					>
+						{ __( 'Template' ) }
+					</th>
+					<th
+						className="edit-site-list-table-column"
+						role="columnheader"
+					>
+						{ __( 'Added by' ) }
+					</th>
+					<th
+						className="edit-site-list-table-column"
+						role="columnheader"
+					>
+						<VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>
+					</th>
+				</tr>
+			</thead>
 
-			{ templates.map( ( template ) => (
-				<li key={ template.id }>
-					<HStack className="edit-site-list-table-row">
-						<FlexItem className="edit-site-list-table-column">
+			<tbody>
+				{ templates.map( ( template ) => (
+					<tr
+						key={ template.id }
+						className="edit-site-list-table-row"
+						role="row"
+					>
+						<td className="edit-site-list-table-column" role="cell">
 							<a
 								href={ addQueryArgs( '', {
 									page: 'gutenberg-edit-site',
@@ -104,12 +118,12 @@ export default function Table( { templateType } ) {
 								{ template.title.rendered }
 							</a>
 							{ template.description }
-						</FlexItem>
+						</td>
 
-						<FlexItem className="edit-site-list-table-column">
+						<td className="edit-site-list-table-column" role="cell">
 							{ template.theme }
-						</FlexItem>
-						<FlexItem className="edit-site-list-table-column">
+						</td>
+						<td className="edit-site-list-table-column" role="cell">
 							{ isTemplateRemovable( template ) && (
 								<DropdownMenu
 									icon={ moreVertical }
@@ -124,10 +138,10 @@ export default function Table( { templateType } ) {
 									) }
 								</DropdownMenu>
 							) }
-						</FlexItem>
-					</HStack>
-				</li>
-			) ) }
-		</ul>
+						</td>
+					</tr>
+				) ) }
+			</tbody>
+		</table>
 	);
 }