Merge pull request #72 from infinum/feature/a11y-icons

Feature - Implement a11y for Icon component

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 (default) or using the existing iconName label from manifest options key
 - Updated dependencies.
 
 ## [1.4.6]

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,23 @@
 $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)) {
+		$titleTag = '<title>' . esc_html($iconTitle) . '</title>';
+		$icon = str_replace('</svg>', $titleTag . '</svg>', $icon);
+	}
 }
 
 // phpcs:ignore Eightshift.Security.HelpersEscape.OutputNotEscaped

blocks/init/src/Blocks/components/icon/manifest.json

@@ -21,6 +21,10 @@
 		"iconUse": {
 			"type": "boolean",
 			"default": true
+		},
+		"iconAriaHidden": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"options": {