From eba56fab069f8e48346a39fbdd2132a0452efd7a Mon Sep 17 00:00:00 2001
From: Kajsa Eggum <kajsa.eggum@geodata.no>
Date: Wed, 17 Apr 2024 08:23:48 +0200
Subject: [PATCH] Add role prop on alert message and info box

---
 packages/react/src/messages/MdAlertMessage.tsx | 4 +++-
 packages/react/src/messages/MdInfoBox.tsx      | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/messages/MdAlertMessage.tsx b/packages/react/src/messages/MdAlertMessage.tsx
index 41afe957..26e85940 100644
--- a/packages/react/src/messages/MdAlertMessage.tsx
+++ b/packages/react/src/messages/MdAlertMessage.tsx
@@ -16,6 +16,7 @@ export interface MdAlertMessageProps {
   customIcon?: React.ReactNode | string;
   className?: string;
   alignContent?: 'start' | 'center' | 'end';
+  role?: React.AriaRole;
 }
 
 const MdAlertMessage: React.FC<MdAlertMessageProps> = ({
@@ -28,6 +29,7 @@ const MdAlertMessage: React.FC<MdAlertMessageProps> = ({
   customIcon,
   className,
   alignContent,
+  role,
 }: MdAlertMessageProps) => {
   const classNames = classnames(
     'md-alert-message',
@@ -66,7 +68,7 @@ const MdAlertMessage: React.FC<MdAlertMessageProps> = ({
   };
 
   return (
-    <div className={classNames}>
+    <div className={classNames} role={role}>
       <div className={contentClassNames}>
         {!hideIcon && renderIcon()}
         {label}
diff --git a/packages/react/src/messages/MdInfoBox.tsx b/packages/react/src/messages/MdInfoBox.tsx
index 195ebd5d..681213db 100644
--- a/packages/react/src/messages/MdInfoBox.tsx
+++ b/packages/react/src/messages/MdInfoBox.tsx
@@ -7,6 +7,7 @@ export interface MdInfoBoxProps {
   hideIcon?: boolean;
   fullWidth?: boolean;
   customIcon?: React.ReactNode | string;
+  role?: React.AriaRole;
 }
 
 const MdInfoBox: React.FC<MdInfoBoxProps> = ({
@@ -14,6 +15,7 @@ const MdInfoBox: React.FC<MdInfoBoxProps> = ({
   hideIcon = false,
   fullWidth = false,
   customIcon,
+  role,
 }: MdInfoBoxProps) => {
   const classNames = classnames('md-info-box', {
     'md-info-box--fullWidth': !!fullWidth,
@@ -28,7 +30,7 @@ const MdInfoBox: React.FC<MdInfoBoxProps> = ({
   };
 
   return (
-    <div className={classNames}>
+    <div className={classNames} role={role}>
       {!hideIcon && renderIcon()}
       {label}
     </div>