fix(Modal): render aria-describedby on the top level modal element

react-bootstrap · Aug 19, 2022 · 6dd9e3b · 6dd9e3b
1 parent 273901f
commit 6dd9e3b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git 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: Modal = React.forwardRef(
       children,
       dialogAs: Dialog,
       'aria-labelledby': ariaLabelledby,
+      'aria-describedby': ariaDescribedby,
       'aria-label': ariaLabel,
 
       /* BaseModal props */
@@ -478,6 +479,7 @@ const Modal: Modal = React.forwardRef(
         onMouseUp={handleMouseUp}
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledby}
+        aria-describedby={ariaDescribedby}
       >
         {/*
         // @ts-ignore */}

diff --git a/test/ModalSpec.js b/test/ModalSpec.js
@@ -362,6 +362,20 @@ describe('<Modal>', () => {
     );
   });
 
+  it('Should set aria-describedby to the role="dialog" element if aria-describedby set', () => {
+    const wrapper = mount(
+      <Modal show aria-describedby="modal-title">
+        <Modal.Header closeButton>
+          <Modal.Title id="modal-title">Modal heading</Modal.Title>
+        </Modal.Header>
+      </Modal>,
+    );
+
+    wrapper.assertSingle(
+      'div.modal.show[role="dialog"][aria-describedby="modal-title"]',
+    );
+  });
+
   it('Should set aria-label to the role="dialog" element if aria-label set', () => {
     const wrapper = mount(
       <Modal show aria-label="modal-label">