diff --git a/README.md b/README.md index f9fd69cc..e84078d6 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# react-modal +k react-modal Accessible modal dialog component for React.JS @@ -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 e8327c3c..31952602 100644 --- a/specs/Modal.spec.js +++ b/specs/Modal.spec.js @@ -93,7 +93,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 0786f355..88f9f064 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -55,7 +55,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 */