From cdf0dbc1d510d770f7b2e47d88c62f3cd03dc191 Mon Sep 17 00:00:00 2001
From: David Wren <david.wren@boxuk.com>
Date: Wed, 11 Sep 2024 10:30:24 +0100
Subject: [PATCH 1/3] [FEATURE] Add ARIA controls to block

---
 .../iconography/src/block/Attributes.type.ts  |  2 +
 packages/iconography/src/block/Edit.tsx       | 37 +++++++++++++++++--
 packages/iconography/src/block/Save.tsx       | 11 +++++-
 packages/iconography/src/block/block.json     | 14 ++++++-
 4 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/packages/iconography/src/block/Attributes.type.ts b/packages/iconography/src/block/Attributes.type.ts
index 09828b7..e4e8a5b 100644
--- a/packages/iconography/src/block/Attributes.type.ts
+++ b/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;
 } >;
diff --git a/packages/iconography/src/block/Edit.tsx b/packages/iconography/src/block/Edit.tsx
index 254de1a..d20040f 100644
--- a/packages/iconography/src/block/Edit.tsx
+++ b/packages/iconography/src/block/Edit.tsx
@@ -1,10 +1,16 @@
 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';
 
@@ -22,6 +28,7 @@ export const Edit = ( {
 	attributes,
 	setAttributes,
 }: BlockEditProps< Attributes > ) => {
+	const { ariaLabel, ariaHidden } = attributes;
 	const blockProps = useBlockProps();
 	const { getFormatType } = useSelect(
 		( select ) =>
@@ -51,6 +58,26 @@ export const Edit = ( {
 
 	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 +92,11 @@ export const Edit = ( {
 			/>
 			<div { ...blockProps }>
 				{ attributes.iconContent && (
-					<TagName className={ attributes.iconClass ?? '' }>
+					<TagName
+						className={ attributes.iconClass ?? '' }
+						aria-label={ ariaLabel || undefined }
+						aria-hidden={ ariaHidden }
+					>
 						{ attributes.iconContent }
 					</TagName>
 				) }
diff --git a/packages/iconography/src/block/Save.tsx b/packages/iconography/src/block/Save.tsx
index f377fc1..967e1a4 100644
--- a/packages/iconography/src/block/Save.tsx
+++ b/packages/iconography/src/block/Save.tsx
@@ -8,12 +8,19 @@ 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';
 
 	return (
 		<div { ...useBlockProps.save() }>
-			<TagName className={ iconClass ?? '' }>{ iconContent }</TagName>
+			<TagName
+				className={ iconClass ?? '' }
+				aria-label={ ariaLabel || undefined }
+				aria-hidden={ ariaHidden }
+			>
+				{ iconContent }
+			</TagName>
 		</div>
 	);
 };
diff --git a/packages/iconography/src/block/block.json b/packages/iconography/src/block/block.json
index c17ba7e..5bef7b4 100644
--- a/packages/iconography/src/block/block.json
+++ b/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": false
 		}
 	},
 	"example": {}

From 1a085e77b6656ac1110c1d7b1d76ef11d3a2a211 Mon Sep 17 00:00:00 2001
From: David Wren <david.wren@boxuk.com>
Date: Wed, 11 Sep 2024 11:35:03 +0100
Subject: [PATCH 2/3] Set default aria-hidden to undefined

---
 packages/iconography/src/block/Edit.tsx   | 2 +-
 packages/iconography/src/block/Save.tsx   | 2 +-
 packages/iconography/src/block/block.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/iconography/src/block/Edit.tsx b/packages/iconography/src/block/Edit.tsx
index d20040f..528d314 100644
--- a/packages/iconography/src/block/Edit.tsx
+++ b/packages/iconography/src/block/Edit.tsx
@@ -95,7 +95,7 @@ export const Edit = ( {
 					<TagName
 						className={ attributes.iconClass ?? '' }
 						aria-label={ ariaLabel || undefined }
-						aria-hidden={ ariaHidden }
+						aria-hidden={ ariaHidden || undefined }
 					>
 						{ attributes.iconContent }
 					</TagName>
diff --git a/packages/iconography/src/block/Save.tsx b/packages/iconography/src/block/Save.tsx
index 967e1a4..ce03653 100644
--- a/packages/iconography/src/block/Save.tsx
+++ b/packages/iconography/src/block/Save.tsx
@@ -17,7 +17,7 @@ export const Save = ( { attributes }: BlockSaveProps< Attributes > ) => {
 			<TagName
 				className={ iconClass ?? '' }
 				aria-label={ ariaLabel || undefined }
-				aria-hidden={ ariaHidden }
+				aria-hidden={ ariaHidden || undefined }
 			>
 				{ iconContent }
 			</TagName>
diff --git a/packages/iconography/src/block/block.json b/packages/iconography/src/block/block.json
index 5bef7b4..413f66e 100644
--- a/packages/iconography/src/block/block.json
+++ b/packages/iconography/src/block/block.json
@@ -80,7 +80,7 @@
 		},
 		"ariaHidden": {
 			"type": "boolean",
-			"default": false
+			"default": ""
 		}
 	},
 	"example": {}

From df526b6bcfd48d503c8304a18fc0aa064be08e70 Mon Sep 17 00:00:00 2001
From: David Wren <david.wren@boxuk.com>
Date: Wed, 11 Sep 2024 12:15:53 +0100
Subject: [PATCH 3/3] Default aria-label sentence case version of icon name

---
 packages/iconography/src/block/Edit.tsx |  6 +++++-
 packages/iconography/src/block/Save.tsx |  8 +++++++-
 packages/iconography/src/utils.ts       | 12 ++++++++++++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/iconography/src/block/Edit.tsx b/packages/iconography/src/block/Edit.tsx
index 528d314..db718d6 100644
--- a/packages/iconography/src/block/Edit.tsx
+++ b/packages/iconography/src/block/Edit.tsx
@@ -16,6 +16,7 @@ import { replace } from '@wordpress/icons';
 
 /* Internal deps */
 import { IconToolbarButton } from '../shared';
+import { toTitleCase } from '../utils';
 import './style.scss';
 
 /* Types */
@@ -55,6 +56,9 @@ export const Edit = ( {
 
 	const TagName =
 		( attributes.iconTag as keyof HTMLElementTagNameMap ) ?? 'span';
+	const defaultAriaLabel = attributes.iconContent
+		? toTitleCase( attributes.iconContent ) + ' icon'
+		: undefined;
 
 	return (
 		<>
@@ -94,7 +98,7 @@ export const Edit = ( {
 				{ attributes.iconContent && (
 					<TagName
 						className={ attributes.iconClass ?? '' }
-						aria-label={ ariaLabel || undefined }
+						aria-label={ ariaLabel || defaultAriaLabel }
 						aria-hidden={ ariaHidden || undefined }
 					>
 						{ attributes.iconContent }
diff --git a/packages/iconography/src/block/Save.tsx b/packages/iconography/src/block/Save.tsx
index ce03653..f06ee2f 100644
--- a/packages/iconography/src/block/Save.tsx
+++ b/packages/iconography/src/block/Save.tsx
@@ -3,6 +3,9 @@ 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';
@@ -11,12 +14,15 @@ export const Save = ( { attributes }: BlockSaveProps< 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 ?? '' }
-				aria-label={ ariaLabel || undefined }
+				aria-label={ ariaLabel || defaultAriaLabel }
 				aria-hidden={ ariaHidden || undefined }
 			>
 				{ iconContent }
diff --git a/packages/iconography/src/utils.ts b/packages/iconography/src/utils.ts
index 1f58b8b..5de547d 100644
--- a/packages/iconography/src/utils.ts
+++ b/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;
+}