From e9770f4129d34f0cabde8fd3a7a10e3f6833b660 Mon Sep 17 00:00:00 2001
From: Matt Hillsdon <matt.hillsdon@microbit.org>
Date: Fri, 15 Nov 2024 10:51:30 +0000
Subject: [PATCH] Fix role=image -> role=img

---
 src/components/ActionDataSamplesCard.tsx | 4 ++--
 src/components/CodeViewDefaultBlock.tsx  | 2 +-
 src/components/LedIcon.tsx               | 2 +-
 src/pages/HomePage.tsx                   | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ActionDataSamplesCard.tsx b/src/components/ActionDataSamplesCard.tsx
index 78e991510..757361931 100644
--- a/src/components/ActionDataSamplesCard.tsx
+++ b/src/components/ActionDataSamplesCard.tsx
@@ -316,7 +316,7 @@ const DataSample = ({
       {hasGraph && (
         <RecordingGraph
           data={recording.data}
-          role="image"
+          role="img"
           aria-label={intl.formatMessage({
             id: "recording-graph-label",
           })}
@@ -337,7 +337,7 @@ const DataSample = ({
         <RecordingFingerprint
           size={view === DataSamplesView.GraphAndDataFeatures ? "sm" : "md"}
           data={recording.data}
-          role="image"
+          role="img"
           aria-label={intl.formatMessage({
             id: "recording-fingerprint-label",
           })}
diff --git a/src/components/CodeViewDefaultBlock.tsx b/src/components/CodeViewDefaultBlock.tsx
index 99936b670..76fe9ff22 100644
--- a/src/components/CodeViewDefaultBlock.tsx
+++ b/src/components/CodeViewDefaultBlock.tsx
@@ -21,7 +21,7 @@ const CodeViewDefaultBlock = ({
   const startTextXPos = onMlStartBlockWidth - 50;
   return (
     <Box
-      role="image"
+      role="img"
       aria-label={intl.formatMessage(
         { id: "makecode-block-default-alt" },
         { actionName, iconName }
diff --git a/src/components/LedIcon.tsx b/src/components/LedIcon.tsx
index 1f5871ae3..fe6272416 100644
--- a/src/components/LedIcon.tsx
+++ b/src/components/LedIcon.tsx
@@ -15,7 +15,7 @@ const LedIcon = ({ icon, isTriggered, size = 20 }: LedIconProps) => {
       width={size}
       height={size}
       ratio={1}
-      role="image"
+      role="img"
       // TODO: Will icon names need to be translated?
       aria-label={icon}
     >
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index a069f4a4e..9bab3fb9a 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -139,7 +139,7 @@ const HomePage = () => {
           </Heading>
           <VStack
             position="relative"
-            role="image"
+            role="img"
             aria-label={intl.formatMessage({ id: "steps-alt" })}
           >
             <StepByStepIllustration />