FSE Document actions - wrap with heading (#25874)

Co-authored-by: Noah Allen <noahtallen@gmail.com>
WordPress · Oct 8, 2020 · 7703fa5 · 7703fa5
1 parent d592d6d
commit 7703fa5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 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
@@ -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
@@ -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);