feat: add aria-modal and onClose event to <Modal>

docs/en/Modal.md

@@ -18,13 +18,15 @@ import {Modal} from 'libreact/lib/Modal';
 </Modal>
 ```
 
-Set aria title and description.
+Set aria title, description, and close button.
 
 ```jsx
-<Modal>{({idTitle, idDescription}) =>
+<Modal>{({idTitle, idDescription, close}) =>
   <div>
     <h1 id={idTitle}>My title</h1>
     <p id={idDescription}>This is description.</p>
+
+    <button onClick={close}>Cancel</button>
   </div>
 }</Modal>
 ```
@@ -43,11 +45,13 @@ Track when user intends to close the the modal.
 Accepts all [`<Overlay>`](./Overlay.md) props in addition to:
 
 - `onEsc` &mdash; optional, callback, called when user presses `Esc` button.
+- `onClose` &mdash; optional, callback, called when `close()` is executed.
 
 
 ## State
 
 `<Modal>` is a render prop that injects its state into the render function. State has the following keys.
 
+- `close()` &mdash; method to calle `onClose` event.
 - `idTitle` &mdash; id to set for aria title element.
 - `idDescription` &mdash; id to set for aria description element.

src/Modal/index.ts

@@ -10,9 +10,11 @@ const ESC = 27;
 
 export interface IModalProps extends IOverlayProps {
   onEsc?: (event: KeyboardEvent) => void;
+  onClose?: () => void;
 }
 
 export interface IModalState {
+  close: () => void;
   idTitle: string;
   idDescription: string;
 }
@@ -28,6 +30,7 @@ export class Modal extends Component<IModalProps, IModalState> {
     this.id = id++;
 
     this.state = {
+      close: () => (this.props.onClose || noop)(),
       idTitle: 'dialog-title-' + this.id,
       idDescription: 'dialog-descr-' + this.id
     };
@@ -74,6 +77,7 @@ export class Modal extends Component<IModalProps, IModalState> {
     el.setAttribute('role', 'dialog');
     el.classList.add('dialog');
 
+    el.setAttribute('aria-modal', 'true');
     el.setAttribute('aria-labelledby', 'dialog-title-' + this.id);
     el.setAttribute('aria-describedby', 'dialog-descr-' + this.id);