From 4420819a1faa0689825b37dd86445b990025f943 Mon Sep 17 00:00:00 2001
From: Tom Cafferkey <tjcafferkey@gmail.com>
Date: Tue, 17 Aug 2021 16:21:07 +0100
Subject: [PATCH] Add label for Block Title component to satisfy accessibility
 (https://github.com/woocommerce/woocommerce-blocks/pull/4585)

---
 .../js/editor-components/block-title/index.js    | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/editor-components/block-title/index.js b/plugins/woocommerce-blocks/assets/js/editor-components/block-title/index.js
index 41479167165..53735262d29 100644
--- a/plugins/woocommerce-blocks/assets/js/editor-components/block-title/index.js
+++ b/plugins/woocommerce-blocks/assets/js/editor-components/block-title/index.js
@@ -4,17 +4,29 @@
 import PropTypes from 'prop-types';
 import { PlainText } from '@wordpress/block-editor';
 import classnames from 'classnames';
+import { withInstanceId } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
 
-const BlockTitle = ( { className, headingLevel, onChange, heading } ) => {
+const BlockTitle = ( {
+	className,
+	headingLevel,
+	onChange,
+	heading,
+	instanceId,
+} ) => {
 	const TagName = `h${ headingLevel }`;
 	return (
 		<TagName>
+			<label className="screen-reader-text" htmlFor={ `block-title-${ instanceId }` }>
+				{ __( 'Block title', 'woo-gutenberg-products-block' ) }
+			</label>
 			<PlainText
+				id={ `block-title-${ instanceId }` }
 				className={ classnames(
 					'wc-block-editor-components-title',
 					className
@@ -45,4 +57,4 @@ BlockTitle.propTypes = {
 	headingLevel: PropTypes.number,
 };
 
-export default BlockTitle;
+export default withInstanceId( BlockTitle );