fix: added localized text shape to Modal (#487)

* added localized text shape to modal

* added description to modal

Author: hertweckhr1

src/Modal/Modal.js

@@ -1,9 +1,9 @@
 import classnames from 'classnames';
+import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import FocusTrap from 'focus-trap-react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import React, { Component } from 'react';
-
 class Modal extends Component {
     // select body element to add Modal component too
     bodyElm = document.querySelector('body');
@@ -30,7 +30,7 @@ class Modal extends Component {
     }
 
     render() {
-        const { children, title, actions, className, show, titleProps, closeProps, contentProps, headerProps, footerProps, bodyProps, ...rest } = this.props;
+        const { localizedText, children, title, actions, className, show, titleProps, closeProps, contentProps, headerProps, footerProps, bodyProps, ...rest } = this.props;
 
         const modalClasses = classnames(
             'fd-ui__overlay',
@@ -68,7 +68,7 @@ class Modal extends Component {
                                     </h1>
                                     <button
                                         {...closeProps}
-                                        aria-label='close'
+                                        aria-label={localizedText.closeButton}
                                         className='fd-button--light fd-modal__close'
                                         onClick={this.handleCloseClick} />
                                 </div>
@@ -106,17 +106,29 @@ Modal.propTypes = {
     contentProps: PropTypes.object,
     footerProps: PropTypes.object,
     headerProps: PropTypes.object,
+    localizedText: CustomPropTypes.i18n({
+        closeButton: PropTypes.string
+    }),
     show: PropTypes.bool,
     titleProps: PropTypes.object
 };
 
+Modal.defaultProps = {
+    localizedText: {
+        closeButton: 'Close'
+    }
+};
+
 Modal.propDescriptions = {
     actions: 'Node(s) to render within the footer of the dialog.',
     bodyProps: 'Additional props to be spread to the body section of the dialog.',
     closeProps: 'Additional props to be spread to the close `<button>` element.',
     contentProps: 'Additional props to be spread to the content section of the dialog.',
     footerProps: 'Additional props to be spread to the footer of the dialog.',
     headerProps: 'Additional props to be spread to the header of the dialog.',
+    localizedText: {
+        closeButton: 'Aria-label for <button> element.'
+    },
     show: 'Set to **true** to make the dialog visible.'
 };