From 93e6aa780c8ae46ebb2cb73e9ae4029a5711f9e0 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 2 Jul 2026 12:46:20 +0300
Subject: [PATCH] fix(iot-hub): add descriptive alt text to hero cluster images

---
 src/components/IotHub/IotHubHero.astro | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/IotHub/IotHubHero.astro b/src/components/IotHub/IotHubHero.astro
index 98d2ab208..929969996 100644
--- a/src/components/IotHub/IotHubHero.astro
+++ b/src/components/IotHub/IotHubHero.astro
@@ -12,23 +12,23 @@ import alarmRulesCluster from '@root/assets/iot-hub/hero-alarm-rule-cluster.svg'
 import ruleChainsCluster from '@root/assets/iot-hub/hero-rule-chain-cluster.svg';
 
 const highlights = [
-	{ slug: 'devices', label: 'Devices,', color: '#4c63cc', cluster: devicesCluster, clusterTop: 57 },
-	{ slug: 'solution-templates', label: 'Solution Templates,', color: '#2c6cb4', cluster: solutionsCluster, clusterTop: 40 },
-	{ slug: 'widgets', label: 'Widgets,', color: '#2c9755', cluster: widgetsCluster, clusterTop: 60 },
-	{ slug: 'calculated-fields', label: 'Calculated Fields,', color: '#3db5e0', cluster: calcFieldsCluster, clusterTop: 80 },
-	{ slug: 'alarm-rules', label: 'Alarm Rules', color: '#d7702f', cluster: alarmRulesCluster, clusterTop: 64 },
-	{ slug: 'rule-chains', label: '& Rule Chains', color: '#bb7ce9', cluster: ruleChainsCluster, clusterTop: 40 },
+	{ slug: 'devices', label: 'Devices,', alt: 'IoT devices cluster illustration', color: '#4c63cc', cluster: devicesCluster, clusterTop: 57 },
+	{ slug: 'solution-templates', label: 'Solution Templates,', alt: 'Solution templates cluster illustration', color: '#2c6cb4', cluster: solutionsCluster, clusterTop: 40 },
+	{ slug: 'widgets', label: 'Widgets,', alt: 'Widgets cluster illustration', color: '#2c9755', cluster: widgetsCluster, clusterTop: 60 },
+	{ slug: 'calculated-fields', label: 'Calculated Fields,', alt: 'Calculated fields cluster illustration', color: '#3db5e0', cluster: calcFieldsCluster, clusterTop: 80 },
+	{ slug: 'alarm-rules', label: 'Alarm Rules', alt: 'Alarm rules cluster illustration', color: '#d7702f', cluster: alarmRulesCluster, clusterTop: 64 },
+	{ slug: 'rule-chains', label: '& Rule Chains', alt: 'Rule chains cluster illustration', color: '#bb7ce9', cluster: ruleChainsCluster, clusterTop: 40 },
 ];
 ---
 
 <section class="iot-hub-hero">
 	{
-		highlights.map(({ slug, cluster, clusterTop }) => (
+		highlights.map(({ slug, alt, cluster, clusterTop }) => (
 			<div class="iot-hub-hero__cluster" data-hl-cluster={slug} aria-hidden="true">
 				<img
 					class="iot-hub-hero__cluster-img"
 					src={cluster.src}
-					alt=""
+					alt={alt}
 					style={`--cluster-top: ${clusterTop}px;`}
 				/>
 			</div>