From 550c21fbbd0f4a3294afb14f6860ea189be5993a Mon Sep 17 00:00:00 2001
From: Marc Servat <marc.servat@sage.com>
Date: Wed, 23 Oct 2024 15:13:59 +0200
Subject: [PATCH] feat(message): add icon description for screen readers

Fixes #7027
---
 src/components/message/message.component.tsx        | 2 ++
 src/components/message/message.test.tsx             | 5 +++++
 src/hooks/__internal__/useLocale/useLocale.test.tsx | 5 +++++
 src/locales/de-de.ts                                | 5 +++++
 src/locales/en-gb.ts                                | 5 +++++
 src/locales/es-es.ts                                | 5 +++++
 src/locales/fr-ca.ts                                | 5 +++++
 src/locales/fr-fr.ts                                | 5 +++++
 src/locales/locale.ts                               | 5 +++++
 9 files changed, 42 insertions(+)

diff --git a/src/components/message/message.component.tsx b/src/components/message/message.component.tsx
index 538000aff3..db7843eca4 100644
--- a/src/components/message/message.component.tsx
+++ b/src/components/message/message.component.tsx
@@ -1,6 +1,7 @@
 import React, { useRef } from "react";
 import { MarginProps } from "styled-system";
 
+import Typography from "../typography";
 import MessageStyle from "./message.style";
 import TypeIcon from "./__internal__/type-icon/type-icon.component";
 import MessageContent from "./__internal__/message-content/message-content.component";
@@ -93,6 +94,7 @@ export const Message = React.forwardRef<HTMLDivElement, MessageProps>(
         tabIndex={-1}
       >
         <TypeIcon variant={variant} transparent={transparent} />
+        <Typography screenReaderOnly>{l.message[variant]()}</Typography>
         <MessageContent
           showCloseIcon={showCloseIcon}
           title={title}
diff --git a/src/components/message/message.test.tsx b/src/components/message/message.test.tsx
index b5fb4046f8..bb9a4362e8 100644
--- a/src/components/message/message.test.tsx
+++ b/src/components/message/message.test.tsx
@@ -88,6 +88,11 @@ test("renders close button aria-label with custom value from translations", () =
       locale={{
         ...enGB,
         message: {
+          info: () => "Information",
+          success: () => "Success",
+          warning: () => "Warning",
+          neutral: () => "Neutral",
+          error: () => "Error",
           closeButtonAriaLabel: () => "test close button",
         },
       }}
diff --git a/src/hooks/__internal__/useLocale/useLocale.test.tsx b/src/hooks/__internal__/useLocale/useLocale.test.tsx
index 006bf6f263..ae6859f441 100644
--- a/src/hooks/__internal__/useLocale/useLocale.test.tsx
+++ b/src/hooks/__internal__/useLocale/useLocale.test.tsx
@@ -24,6 +24,11 @@ test("when I18nProvider exists, it should return a translation function that pro
       locale={{
         locale: () => "en-GB",
         message: {
+          info: () => "Information",
+          success: () => "Success",
+          warning: () => "Warning",
+          neutral: () => "Neutral",
+          error: () => "Error",
           closeButtonAriaLabel: () => "test",
         },
       }}
diff --git a/src/locales/de-de.ts b/src/locales/de-de.ts
index f743ab3c4c..33ab66fdc4 100644
--- a/src/locales/de-de.ts
+++ b/src/locales/de-de.ts
@@ -106,6 +106,11 @@ const deDE: Partial<Locale> = {
   },
   message: {
     closeButtonAriaLabel: () => "Schließen",
+    error: () => "Fehler",
+    info: () => "Informationen",
+    success: () => "Erfolg",
+    warning: () => "Warnung",
+    neutral: () => "Informationen",
   },
   numeralDate: {
     validation: {
diff --git a/src/locales/en-gb.ts b/src/locales/en-gb.ts
index 41fbecd520..5247011a44 100644
--- a/src/locales/en-gb.ts
+++ b/src/locales/en-gb.ts
@@ -115,6 +115,11 @@ const enGB: Locale = {
   },
   message: {
     closeButtonAriaLabel: () => "Close",
+    error: () => "Error",
+    info: () => "Information",
+    success: () => "Success",
+    warning: () => "Warning",
+    neutral: () => "Information",
   },
   numeralDate: {
     validation: {
diff --git a/src/locales/es-es.ts b/src/locales/es-es.ts
index 4f457cb259..a642a9c92e 100644
--- a/src/locales/es-es.ts
+++ b/src/locales/es-es.ts
@@ -113,6 +113,11 @@ const esES: Partial<Locale> = {
   },
   message: {
     closeButtonAriaLabel: () => "Cerrar",
+    error: () => "Error",
+    info: () => "Información",
+    success: () => "Acción realizada",
+    warning: () => "Aviso",
+    neutral: () => "Información",
   },
   numeralDate: {
     validation: {
diff --git a/src/locales/fr-ca.ts b/src/locales/fr-ca.ts
index 2e0106b250..05a48a8c0e 100644
--- a/src/locales/fr-ca.ts
+++ b/src/locales/fr-ca.ts
@@ -115,6 +115,11 @@ const frCA: Partial<Locale> = {
   },
   message: {
     closeButtonAriaLabel: () => "Fermer",
+    error: () => "Erreur",
+    info: () => "Information",
+    success: () => "Opération réussie",
+    warning: () => "Avertissement",
+    neutral: () => "Information",
   },
   numeralDate: {
     validation: {
diff --git a/src/locales/fr-fr.ts b/src/locales/fr-fr.ts
index 896452bbd2..9618c07087 100644
--- a/src/locales/fr-fr.ts
+++ b/src/locales/fr-fr.ts
@@ -115,6 +115,11 @@ const frFR: Partial<Locale> = {
   },
   message: {
     closeButtonAriaLabel: () => "Fermer",
+    error: () => "Erreur",
+    info: () => "Information",
+    success: () => "Action réussie",
+    warning: () => "Avertissement",
+    neutral: () => "Information",
   },
   numeralDate: {
     validation: {
diff --git a/src/locales/locale.ts b/src/locales/locale.ts
index 50510bd24f..c4df839757 100644
--- a/src/locales/locale.ts
+++ b/src/locales/locale.ts
@@ -92,6 +92,11 @@ interface Locale {
   };
   message: {
     closeButtonAriaLabel: () => string;
+    error: () => string;
+    info: () => string;
+    success: () => string;
+    warning: () => string;
+    neutral: () => string;
   };
   numeralDate: {
     validation: {