feat(aria): add closeAriaLabel (#525)

supergibbs · TheSharpieOne · commit 3b4c0e6f3132 · 2017-08-06T20:42:14.000-04:00
Add closeAriaLabel to Alert and ModalHeader to override default close value Closes #524
diff --git a/src/Alert.js b/src/Alert.js
@@ -12,6 +12,7 @@ const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   closeClassName: PropTypes.string,
+  closeAriaLabel: PropTypes.string,
   cssModule: PropTypes.object,
   color: PropTypes.string,
   isOpen: PropTypes.bool,
@@ -28,13 +29,15 @@ const defaultProps = {
   tag: 'div',
   transitionAppearTimeout: 150,
   transitionEnterTimeout: 150,
-  transitionLeaveTimeout: 150
+  transitionLeaveTimeout: 150,
+  closeAriaLabel: 'Close'
 };
 
 const Alert = (props) => {
   const {
     className,
     closeClassName,
+    closeAriaLabel,
     cssModule,
     tag: Tag,
     color,
@@ -59,7 +62,7 @@ const Alert = (props) => {
   const alert = (
     <Tag {...attributes} className={classes} role="alert">
       { toggle ?
-        <button type="button" className={closeClasses} aria-label="Close" onClick={toggle}>
+        <button type="button" className={closeClasses} aria-label={closeAriaLabel} onClick={toggle}>
           <span aria-hidden="true">&times;</span>
         </button>
         : null }
diff --git a/src/ModalHeader.js b/src/ModalHeader.js
@@ -10,11 +10,13 @@ const propTypes = {
   className: PropTypes.string,
   cssModule: PropTypes.object,
   children: PropTypes.node,
+  closeAriaLabel: PropTypes.string,
 };
 
 const defaultProps = {
   tag: 'h4',
   wrapTag: 'div',
+  closeAriaLabel: 'Close',
 };
 
 const ModalHeader = (props) => {
@@ -26,6 +28,7 @@ const ModalHeader = (props) => {
     toggle,
     tag: Tag,
     wrapTag: WrapTag,
+    closeAriaLabel,
     ...attributes } = props;
 
   const classes = mapToCssModules(classNames(
@@ -35,7 +38,7 @@ const ModalHeader = (props) => {
 
   if (toggle) {
     closeButton = (
-      <button type="button" onClick={toggle} className="close" aria-label="Close">
+      <button type="button" onClick={toggle} className="close" aria-label={closeAriaLabel}>
         <span aria-hidden="true">{String.fromCharCode(215)}</span>
       </button>
     );
