From d664b2e94f9741ecf7833caac5f66e0e965ddff8 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        | 3 ++-
 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(+), 1 deletion(-)

diff --git a/src/components/message/message.component.tsx b/src/components/message/message.component.tsx
index 538000aff3..66b16e85ac 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";
@@ -80,7 +81,6 @@ export const Message = React.forwardRef<HTMLDivElement, MessageProps>(
         </IconButton>
       );
     };
-
     return open ? (
       <MessageStyle
         {...tagComponent("Message", props)}
@@ -93,6 +93,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..ebbb8eb23f 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: () => "",
+    info: () => "",
+    success: () => "",
+    warning: () => "",
+    neutral: () => "",
   },
   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..9e42bd1fe1 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: () => "",
+    info: () => "",
+    success: () => "",
+    warning: () => "",
+    neutral: () => "",
   },
   numeralDate: {
     validation: {
diff --git a/src/locales/fr-ca.ts b/src/locales/fr-ca.ts
index 2e0106b250..d05bd1e2c6 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: () => "",
+    info: () => "",
+    success: () => "",
+    warning: () => "",
+    neutral: () => "",
   },
   numeralDate: {
     validation: {
diff --git a/src/locales/fr-fr.ts b/src/locales/fr-fr.ts
index 896452bbd2..9e599f697d 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: () => "",
+    info: () => "",
+    success: () => "",
+    warning: () => "",
+    neutral: () => "",
   },
   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: {