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

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

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/src/Modal.tsx b/src/Modal.tsx
@@ -218,6 +218,8 @@ const propTypes = {
   container: PropTypes.any,
 
   'aria-labelledby': PropTypes.any,
+
+  'aria-label': PropTypes.string,
 };
 
 const defaultProps = {
@@ -253,6 +255,7 @@ const Modal: Modal = React.forwardRef(
       children,
       dialogAs: Dialog,
       'aria-labelledby': ariaLabelledby,
+      'aria-label': ariaLabel,
 
       /* BaseModal props */
 
@@ -473,6 +476,7 @@ const Modal: Modal = React.forwardRef(
         )}
         onClick={backdrop ? handleClick : undefined}
         onMouseUp={handleMouseUp}
+        aria-label={ariaLabel}
         aria-labelledby={ariaLabelledby}
       >
         {/*

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