From 4e91b0adc06aa913d9b885264e284171fc759cb2 Mon Sep 17 00:00:00 2001
From: jbpenrath <jb.penrath@gmail.com>
Date: Mon, 8 Dec 2025 14:54:47 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(react)=20add=20ariaLabel=20t?=
 =?UTF-8?q?o=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The accessibility plugin checks raise an error about modal component. Actually
we did not allow user to set an accessible name to the modal.
---
 packages/react/src/components/Modal/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react/src/components/Modal/index.tsx b/packages/react/src/components/Modal/index.tsx
index e4f9c67..63f2003 100644
--- a/packages/react/src/components/Modal/index.tsx
+++ b/packages/react/src/components/Modal/index.tsx
@@ -53,6 +53,7 @@ export type ModalProps = PropsWithChildren & {
   closeOnClickOutside?: boolean;
   closeOnEsc?: boolean;
   preventClose?: boolean;
+  "aria-label"?: string;
 };
 
 export const Modal = (props: ModalProps) => {
@@ -93,6 +94,7 @@ export const ModalInner = ({ closeOnEsc = true, ...props }: ModalProps) => {
       shouldCloseOnOverlayClick={!!props.closeOnClickOutside}
       shouldCloseOnEsc={closeOnEsc}
       bodyOpenClassName={classNames("c__modals--opened", NOSCROLL_CLASS)}
+      contentLabel={props["aria-label"] || props.title?.toString()}
     >
       <div className="c__modal__scroller">
         {!props.hideCloseButton && !props.preventClose && (