Allow defining an aria-label in group blocks

docs/reference-guides/core-blocks.md

@@ -275,7 +275,7 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute
 
 -	**Name:** core/group
 -	**Category:** design
--	**Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, link, text), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** tagName, templateLock
 
 ## Heading

packages/block-editor/src/hooks/aria-label.js

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { hasBlockSupport } from '@wordpress/blocks';
+
+const ARIA_LABEL_SCHEMA = {
+	type: 'string',
+	source: 'attribute',
+	attribute: 'aria-label',
+	selector: '*',
+};
+
+/**
+ * Filters registered block settings, extending attributes with ariaLabel using aria-label
+ * of the first node.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+export function addAttribute( settings ) {
+	// Allow blocks to specify their own attribute definition with default values if needed.
+	if ( settings?.attributes?.ariaLabel?.type ) {
+		return settings;
+	}
+	if ( hasBlockSupport( settings, 'ariaLabel' ) ) {
+		// Gracefully handle if settings.attributes is undefined.
+		settings.attributes = {
+			...settings.attributes,
+			ariaLabel: ARIA_LABEL_SCHEMA,
+		};
+	}
+
+	return settings;
+}
+
+/**
+ * Override props assigned to save component to inject aria-label, if block
+ * supports ariaLabel. This is only applied if the block's save result is an
+ * element and not a markup string.
+ *
+ * @param {Object} extraProps Additional props applied to save element.
+ * @param {Object} blockType  Block type.
+ * @param {Object} attributes Current block attributes.
+ *
+ * @return {Object} Filtered props applied to save element.
+ */
+export function addSaveProps( extraProps, blockType, attributes ) {
+	if ( hasBlockSupport( blockType, 'ariaLabel' ) ) {
+		extraProps[ 'aria-label' ] =
+			attributes.ariaLabel === '' ? null : attributes.ariaLabel;
+	}
+
+	return extraProps;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/ariaLabel/attribute',
+	addAttribute
+);
+addFilter(
+	'blocks.getSaveContent.extraProps',
+	'core/ariaLabel/save-props',
+	addSaveProps
+);

packages/block-editor/src/hooks/index.js

@@ -5,6 +5,7 @@ import './compat';
 import './align';
 import './lock';
 import './anchor';
+import './aria-label';
 import './custom-class-name';
 import './generated-class-name';
 import './style';

packages/block-library/src/group/block.json

@@ -21,6 +21,7 @@
 		"__experimentalSettings": true,
 		"align": [ "wide", "full" ],
 		"anchor": true,
+		"ariaLabel": true,
 		"html": false,
 		"color": {
 			"gradients": true,

schemas/json/block.json

@@ -245,6 +245,11 @@
 					"description": "This property allows to enable wide alignment for your theme. To disable this behavior for a single block, set this flag to false.",
 					"default": true
 				},
+				"ariaLabel": {
+					"type": "boolean",
+					"description": "ARIA-labels let you define an accessible label for elements. This property allows enabling the definition of an aria-label for the block, without exposing a UI field.",
+					"default": false
+				},
 				"className": {
 					"type": "boolean",
 					"description": "By default, the class .wp-block-your-block-name is added to the root element of your saved markup. This helps having a consistent mechanism for styling blocks that themes and plugins can rely on. If, for whatever reason, a class is not desired on the markup, this functionality can be disabled.",