diff --git a/README.md b/README.md index a3b76334..a46dc668 100644 --- a/README.md +++ b/README.md @@ -27,10 +27,9 @@ To install the stable version you can use [npm](https://npmjs.org/) or [yarn](ht ## Usage -The Modal object has two required props: +The Modal object has one required prop: - `isOpen` to render its children. -- `contentLabel` to improve accessibility, since `v1.6.0`. Example: @@ -48,6 +47,8 @@ Example: ``` +> Use the prop `contentLabel` which adds `aria-label` to the modal if there is no label text visible on the screen, otherwise specify the element including the label text using `aria-labelledby` + ### App Element The app element allows you to specify the portion diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js index 2527d1d7..38248c82 100644 --- a/specs/Modal.spec.js +++ b/specs/Modal.spec.js @@ -94,7 +94,7 @@ describe('State', () => { expect(contentAttribute(modal, 'role')).toEqual('dialog'); }); - it('set aria-label based on the contentLabel prop', () => { + it('sets aria-label based on the contentLabel prop', () => { const child = 'I am a child of Modal, and he has sent me here...'; const modal = renderModal({ isOpen: true, diff --git a/src/components/Modal.js b/src/components/Modal.js index 7dff8091..00c0203e 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -56,7 +56,7 @@ export default class Modal extends Component { parentSelector: PropTypes.func, aria: PropTypes.object, role: PropTypes.string, - contentLabel: PropTypes.string.isRequired + contentLabel: PropTypes.string }; /* eslint-enable react/no-unused-prop-types */