[FEATURE] Add ARIA controls to block

packages/iconography/src/block/Attributes.type.ts

@@ -4,4 +4,6 @@ export type Attributes = Partial< {
 	iconClass: WPFormat[ 'className' ];
 	iconTag: WPFormat[ 'tagName' ];
 	iconContent: string;
+	ariaLabel?: string;
+	ariaHidden?: boolean;
 } >;

packages/iconography/src/block/Edit.tsx

@@ -1,15 +1,22 @@
 import React from 'react';
 
 /* WordPress Dependencies */
-import { useBlockProps } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { store as RichTextStore } from '@wordpress/rich-text';
 import { useSelect } from '@wordpress/data';
-import { Icon, Spinner } from '@wordpress/components';
+import {
+	Icon,
+	Spinner,
+	PanelBody,
+	TextControl,
+	ToggleControl,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { replace } from '@wordpress/icons';
 
 /* Internal deps */
 import { IconToolbarButton } from '../shared';
+import { toTitleCase } from '../utils';
 import './style.scss';
 
 /* Types */
@@ -22,6 +29,7 @@ export const Edit = ( {
 	attributes,
 	setAttributes,
 }: BlockEditProps< Attributes > ) => {
+	const { ariaLabel, ariaHidden } = attributes;
 	const blockProps = useBlockProps();
 	const { getFormatType } = useSelect(
 		( select ) =>
@@ -48,9 +56,32 @@ export const Edit = ( {
 
 	const TagName =
 		( attributes.iconTag as keyof HTMLElementTagNameMap ) ?? 'span';
+	const defaultAriaLabel = attributes.iconContent
+		? toTitleCase( attributes.iconContent ) + ' icon'
+		: undefined;
 
 	return (
 		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'ARIA Settings' ) }>
+					<TextControl
+						label={ __( 'ARIA Label' ) }
+						value={ ariaLabel ?? '' }
+						onChange={ ( value ) =>
+							setAttributes( { ariaLabel: value } )
+						}
+					/>
+					<ToggleControl
+						label={ __(
+							'Hide element from assistive technologies (aria-hidden)'
+						) }
+						checked={ ariaHidden }
+						onChange={ ( value ) =>
+							setAttributes( { ariaHidden: value } )
+						}
+					/>
+				</PanelBody>
+			</InspectorControls>
 			<IconToolbarButton
 				icon={ <Icon icon={ replace } /> }
 				onChange={ handleChange }
@@ -65,7 +96,11 @@ export const Edit = ( {
 			/>
 			<div { ...blockProps }>
 				{ attributes.iconContent && (
-					<TagName className={ attributes.iconClass ?? '' }>
+					<TagName
+						className={ attributes.iconClass ?? '' }
+						aria-label={ ariaLabel || defaultAriaLabel }
+						aria-hidden={ ariaHidden || undefined }
+					>
 						{ attributes.iconContent }
 					</TagName>
 				) }

packages/iconography/src/block/Save.tsx

@@ -3,17 +3,30 @@ import React from 'react';
 /* WordPress Dependencies */
 import { useBlockProps } from '@wordpress/block-editor';
 
+/* Internal deps */
+import { toTitleCase } from '../utils';
+
 /* Types */
 import type { Attributes } from './Attributes.type';
 import type { BlockSaveProps } from '@wordpress/blocks';
 
 export const Save = ( { attributes }: BlockSaveProps< Attributes > ) => {
-	const { iconClass, iconTag, iconContent } = attributes;
+	const { iconClass, iconTag, iconContent, ariaHidden, ariaLabel } =
+		attributes;
 	const TagName = ( iconTag as keyof HTMLElementTagNameMap ) ?? 'span';
+	const defaultAriaLabel = attributes.iconContent
+		? toTitleCase( attributes.iconContent ) + ' icon'
+		: undefined;
 
 	return (
 		<div { ...useBlockProps.save() }>
-			<TagName className={ iconClass ?? '' }>{ iconContent }</TagName>
+			<TagName
+				className={ iconClass ?? '' }
+				aria-label={ ariaLabel || defaultAriaLabel }
+				aria-hidden={ ariaHidden || undefined }
+			>
+				{ iconContent }
+			</TagName>
 		</div>
 	);
 };

packages/iconography/src/block/block.json

@@ -6,7 +6,11 @@
 	"category": "media",
 	"description": "Display an icon as a block.",
 	"icon": "star-filled",
-	"keywords": [ "icon", "emoji", "symbol" ],
+	"keywords": [
+		"icon",
+		"emoji",
+		"symbol"
+	],
 	"textdomain": "boxuk",
 	"style": "file:./style-index.css",
 	"editorScript": "file:./index.ts",
@@ -69,6 +73,14 @@
 			"default": {
 				"textAlign": "center"
 			}
+		},
+		"ariaLabel": {
+			"type": "string",
+			"default": ""
+		},
+		"ariaHidden": {
+			"type": "boolean",
+			"default": ""
 		}
 	},
 	"example": {}

packages/iconography/src/utils.ts

@@ -70,3 +70,15 @@ export const getIconGroups = ( withEdit = true ): IconGroup[] | undefined =>
 			edit: () => {},
 		};
 	} );
+
+/**
+ *
+ * @param {string} title The title to change to title case.
+ * @return {string} The altered title.
+ */
+export function toTitleCase( title: string ): string {
+	title = title.replace( /_/g, ' ' );
+	title =
+		title.charAt( 0 ).toUpperCase() + title.substring( 1 ).toLowerCase();
+	return title;
+}