From 3129455b1da19c9578e66b86c29b54ca73026391 Mon Sep 17 00:00:00 2001
From: Ivan Ramljak <ivanoramljak@gmail.com>
Date: Thu, 5 Dec 2024 22:54:13 +0100
Subject: [PATCH 1/2] Implement a11y for Icon component

Either by setting aria-hidden to true or using the existing iconName
label from manifest option key
---
 CHANGELOG.md                                  |  1 +
 .../init/src/Blocks/components/icon/icon.php  | 25 ++++++++++++++++++-
 .../src/Blocks/components/icon/manifest.json  |  4 +++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1e917b4..e1982e5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 - Fix Image component responsive output Co-authored-by: goran.alkovic@infinum.com
 - Add "Auto" width to wrapperContent and set is as defaults
 - Add a buttonType attribute to Button component
+- Implement a11y for Icon component either by setting aria-hidden to true or using the existing iconName label from manifest option key
 - Updated dependencies.
 
 ## [1.4.6]
diff --git a/blocks/init/src/Blocks/components/icon/icon.php b/blocks/init/src/Blocks/components/icon/icon.php
index edce2b1..95fe27d 100644
--- a/blocks/init/src/Blocks/components/icon/icon.php
+++ b/blocks/init/src/Blocks/components/icon/icon.php
@@ -19,6 +19,7 @@
 $additionalClass = $attributes['additionalClass'] ?? '';
 
 $iconName = Helpers::checkAttr('iconName', $attributes, $manifest);
+$iconAriaHidden = Helpers::checkAttr('iconAriaHidden', $attributes, $manifest);
 
 if (!isset($manifest['icons'][$iconName])) {
 	return;
@@ -29,7 +30,29 @@
 $className = Helpers::tailwindClasses('base', $attributes, $manifest, $additionalClass);
 
 if (!empty($className)) {
-	$icon = str_replace('<svg ', '<svg class="' . htmlspecialchars($className) . '" ', $icon);
+	$icon = str_replace('<svg ', '<svg class="' . esc_attr($className) . '" ', $icon);
+}
+
+if ($iconAriaHidden) {
+	$icon = str_replace('<svg ', '<svg aria-hidden="true" ', $icon);
+} else {
+	$iconTitle = '';
+	$iconOption = array_filter($manifest['options']['iconName'], fn($option) => $option['value'] === $iconName);
+
+	if (!empty($iconOption)) {
+		$iconTitle = reset($iconOption)['label'];
+	}
+
+	if (!empty($iconTitle)) {
+		$uniqueId = Helpers::getUnique();
+		$titleId = esc_attr("{$iconName}_title_{$uniqueId}");
+
+		$ariaLabelledby = 'aria-labelledby="' . $titleId . '"';
+		$titleTag = '<title id="' . $titleId . '">' . esc_html($iconTitle) . '</title>';
+
+		$icon = str_replace('<svg ', '<svg ' . $ariaLabelledby . ' ', $icon);
+		$icon = str_replace('</svg>', $titleTag . '</svg>', $icon);
+	}
 }
 
 // phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped
diff --git a/blocks/init/src/Blocks/components/icon/manifest.json b/blocks/init/src/Blocks/components/icon/manifest.json
index 606bd14..51a298f 100644
--- a/blocks/init/src/Blocks/components/icon/manifest.json
+++ b/blocks/init/src/Blocks/components/icon/manifest.json
@@ -21,6 +21,10 @@
 		"iconUse": {
 			"type": "boolean",
 			"default": true
+		},
+		"iconAriaHidden": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"options": {

From 54eaac2210c4e63c24f2ce5fdb5ab64694ec03e0 Mon Sep 17 00:00:00 2001
From: Ivan Ramljak <ivanoramljak@gmail.com>
Date: Fri, 6 Dec 2024 09:41:15 +0100
Subject: [PATCH 2/2] Remove labelledby from Icon and set its aria-hidden to be
 the default

---
 CHANGELOG.md                                         | 2 +-
 blocks/init/src/Blocks/components/icon/icon.php      | 8 +-------
 blocks/init/src/Blocks/components/icon/manifest.json | 2 +-
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e1982e5..affa553 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,7 +13,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 - Fix Image component responsive output Co-authored-by: goran.alkovic@infinum.com
 - Add "Auto" width to wrapperContent and set is as defaults
 - Add a buttonType attribute to Button component
-- Implement a11y for Icon component either by setting aria-hidden to true or using the existing iconName label from manifest option key
+- Implement a11y for Icon component either by setting aria-hidden to true (default) or using the existing iconName label from manifest options key
 - Updated dependencies.
 
 ## [1.4.6]
diff --git a/blocks/init/src/Blocks/components/icon/icon.php b/blocks/init/src/Blocks/components/icon/icon.php
index 95fe27d..8bf3dec 100644
--- a/blocks/init/src/Blocks/components/icon/icon.php
+++ b/blocks/init/src/Blocks/components/icon/icon.php
@@ -44,13 +44,7 @@
 	}
 
 	if (!empty($iconTitle)) {
-		$uniqueId = Helpers::getUnique();
-		$titleId = esc_attr("{$iconName}_title_{$uniqueId}");
-
-		$ariaLabelledby = 'aria-labelledby="' . $titleId . '"';
-		$titleTag = '<title id="' . $titleId . '">' . esc_html($iconTitle) . '</title>';
-
-		$icon = str_replace('<svg ', '<svg ' . $ariaLabelledby . ' ', $icon);
+		$titleTag = '<title>' . esc_html($iconTitle) . '</title>';
 		$icon = str_replace('</svg>', $titleTag . '</svg>', $icon);
 	}
 }
diff --git a/blocks/init/src/Blocks/components/icon/manifest.json b/blocks/init/src/Blocks/components/icon/manifest.json
index 51a298f..5d258a6 100644
--- a/blocks/init/src/Blocks/components/icon/manifest.json
+++ b/blocks/init/src/Blocks/components/icon/manifest.json
@@ -24,7 +24,7 @@
 		},
 		"iconAriaHidden": {
 			"type": "boolean",
-			"default": false
+			"default": true
 		}
 	},
 	"options": {