feat(message): add icon description for screen readers

Fixes #7027
Sage · Nov 8, 2024 · 47c5a2c · 47c5a2c
1 parent a4d25b4
commit 47c5a2c
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -92,6 +92,11 @@ interface Locale {
   };
   message: {
     closeButtonAriaLabel: () => string;
+    error: () => string;
+    info: () => string;
+    success: () => string;
+    warning: () => string;
+    neutral: () => string;
   };
   numeralDate: {
     validation: {