From 7703fa5edd426a4ed9186e472be320901f2f49e7 Mon Sep 17 00:00:00 2001
From: Addison Stavlo <Stavz01@gmail.com>
Date: Wed, 7 Oct 2020 23:34:09 -0400
Subject: [PATCH] FSE Document actions - wrap with heading (#25874)

Co-authored-by: Noah Allen <noahtallen@gmail.com>
---
 .../header/document-actions/index.js          | 29 ++++++++++++-------
 .../header/document-actions/style.scss        |  7 +++++
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js
index 74da7e72488810..abdb1740b2d0d4 100644
--- a/packages/edit-site/src/components/header/document-actions/index.js
+++ b/packages/edit-site/src/components/header/document-actions/index.js
@@ -12,6 +12,8 @@ import {
 	getBlockType,
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
+import { VisuallyHidden } from '@wordpress/components';
+
 import { last } from 'lodash';
 
 function getBlockDisplayText( block ) {
@@ -84,17 +86,22 @@ export default function DocumentActions( { documentTitle } ) {
 		>
 			{ documentTitle ? (
 				<>
-					<div
-						className={ classnames(
-							'edit-site-document-actions__title',
-							{
-								'is-active': isTitleActive,
-								'is-secondary-title-active': isActive,
-							}
-						) }
-					>
-						{ documentTitle }
-					</div>
+					<h1 className="edit-site-document-actions__title-wrapper">
+						<VisuallyHidden>
+							{ __( 'Edit template:' ) }
+						</VisuallyHidden>
+						<div
+							className={ classnames(
+								'edit-site-document-actions__title',
+								{
+									'is-active': isTitleActive,
+									'is-secondary-title-active': isActive,
+								}
+							) }
+						>
+							{ documentTitle }
+						</div>
+					</h1>
 					<div
 						className={ classnames(
 							'edit-site-document-actions__secondary-item',
diff --git a/packages/edit-site/src/components/header/document-actions/style.scss b/packages/edit-site/src/components/header/document-actions/style.scss
index 83072d073c02b1..d894c837bf9ff8 100644
--- a/packages/edit-site/src/components/header/document-actions/style.scss
+++ b/packages/edit-site/src/components/header/document-actions/style.scss
@@ -6,13 +6,19 @@
 	height: 100%;
 	position: relative;
 
+	.edit-site-document-actions__title-wrapper {
+		margin: 0;
+	}
+
 	.edit-site-document-actions__title {
+		font-size: $default-font-size;
 		font-weight: bold;
 		transition: transform 0.2s;
 		@include reduce-motion(transition);
 	}
 
 	.edit-site-document-actions__secondary-item {
+		font-size: $default-font-size;
 		opacity: 0;
 		transform: translateY(20px);
 		transition: transform 0.2s;
@@ -22,6 +28,7 @@
 	&.has-secondary-label {
 		.edit-site-document-actions__title {
 			position: absolute;
+			left: 0;
 			color: $gray-900;
 			font-weight: bold;
 			transform: translateY(-12px);