diff --git a/src/Modal.tsx b/src/Modal.tsx index 1fe290a817..35bd80ae24 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: 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 index f020025d25..4ebb1b69e2 100644 --- a/test/ModalSpec.js +++ b/test/ModalSpec.js @@ -362,6 +362,20 @@ describe('', () => { ); }); + it('Should set aria-describedby to the role="dialog" element if aria-describedby set', () => { + const wrapper = mount( + + + Modal heading + + , + ); + + 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(