add accessible name for custom loader

Author: LauRoxx

src/BlockUi.js

@@ -157,7 +157,7 @@ class BlockUi extends Component {
         {blocking &&
         <div tabIndex="0" onKeyUp={this.tabbedUpTop} onKeyDown={this.tabbedDownTop} ref={this.setTopFocus}>
           <div className="sr-only">
-            {message || React.isValidElement(Loader) ? Loader : ariaLabel}
+            {message || ariaLabel}
           </div>
         </div>}
         {renderChilds && children}
@@ -174,8 +174,10 @@ class BlockUi extends Component {
             style={{ top: keepInView ? this.state.top : undefined }}
           >
             <div className="block-ui-message">
-              {message}
-              {React.isValidElement(Loader) ? Loader : <Loader ariaLabel={ariaLabel} />}
+              {message || <span className="sr-only">{ariaLabel}</span>}
+              <div aria-hidden>
+                {React.isValidElement(Loader) ? Loader : <Loader/>}
+              </div>
             </div>
           </div>
         </div>

src/Loader.js

@@ -1,18 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-function Loader({ ariaLabel }) {
+
+function Loader() {
   return (
     <div className="loading-indicator">
-      <span className="sr-only">{ariaLabel}</span>
-      <span aria-hidden className="loading-bullet">&bull;</span>{' '}
-      <span aria-hidden className="loading-bullet">&bull;</span>{' '}
-      <span aria-hidden className="loading-bullet">&bull;</span>
+      <span className="loading-bullet">&bull;</span>{' '}
+      <span className="loading-bullet">&bull;</span>{' '}
+      <span className="loading-bullet">&bull;</span>
     </div>
   );
 }
 
-Loader.propTypes = {
-  ariaLabel: PropTypes.string,
-};
-
 export default Loader;