From 93a8a0ef29409293dd69fad5873ad791634b3ed1 Mon Sep 17 00:00:00 2001
From: Kyle Tsang <6854874+kyletsang@users.noreply.github.com>
Date: Fri, 25 Mar 2022 09:05:08 -0700
Subject: [PATCH] fix(Modal): render aria-describedby on the top level modal
 element (#6282)

---
 src/Modal.tsx      |  6 ++++--
 test/ModalSpec.tsx | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/Modal.tsx b/src/Modal.tsx
index ff98f0776e..ac7a6ad024 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -217,8 +217,8 @@ const propTypes = {
    */
   container: PropTypes.any,
 
-  'aria-labelledby': PropTypes.any,
-
+  'aria-labelledby': PropTypes.string,
+  'aria-describedby': PropTypes.string,
   'aria-label': PropTypes.string,
 };
 
@@ -255,6 +255,7 @@ const Modal: BsPrefixRefForwardingComponent<'div', ModalProps> =
         children,
         dialogAs: Dialog,
         'aria-labelledby': ariaLabelledby,
+        'aria-describedby': ariaDescribedby,
         'aria-label': ariaLabel,
 
         /* BaseModal props */
@@ -462,6 +463,7 @@ const Modal: BsPrefixRefForwardingComponent<'div', ModalProps> =
           onMouseUp={handleMouseUp}
           aria-label={ariaLabel}
           aria-labelledby={ariaLabelledby}
+          aria-describedby={ariaDescribedby}
         >
           {/*
         // @ts-ignore */}
diff --git a/test/ModalSpec.tsx b/test/ModalSpec.tsx
index 8ff84d2df8..06a5c1faf5 100644
--- a/test/ModalSpec.tsx
+++ b/test/ModalSpec.tsx
@@ -393,6 +393,20 @@ describe('<Modal>', () => {
     );
   });
 
+  it('Should set aria-describedby to the role="dialog" element if aria-describedby set', () => {
+    const { getByRole } = render(
+      <Modal show aria-describedby="modal-title">
+        <Modal.Header closeButton>
+          <Modal.Title id="modal-title">Modal heading</Modal.Title>
+        </Modal.Header>
+      </Modal>,
+    );
+
+    expect(getByRole('dialog').getAttribute('aria-describedby')).to.equal(
+      'modal-title',
+    );
+  });
+
   it('Should set aria-label to the role="dialog" element if aria-label set', () => {
     const labelValue = 'modal-label';
     const { getByRole } = render(