add names to focusable elements

Author: LauRoxx

src/BlockUi.js

@@ -155,7 +155,11 @@ class BlockUi extends Component {
     return (
       <Tag {...attributes} className={classes} aria-busy={blocking}>
         {blocking &&
-        <div tabIndex="0" onKeyUp={this.tabbedUpTop} onKeyDown={this.tabbedDownTop} ref={this.setTopFocus} />}
+        <div tabIndex="0" onKeyUp={this.tabbedUpTop} onKeyDown={this.tabbedDownTop} ref={this.setTopFocus}>
+          <div className="sr-only">
+            {message || React.isValidElement(Loader) ? Loader : ariaLabel}
+          </div>
+        </div>}
         {renderChilds && children}
         {blocking &&
         <div className="block-ui-container"

src/Loader.js

@@ -2,16 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 function Loader({ ariaLabel }) {
   return (
-    <div className="loading-indicator" aria-label={ariaLabel}>
-      <span aria-hidden="true" className="loading-bullet">&bull;</span>{' '}
-      <span aria-hidden="true" className="loading-bullet">&bull;</span>{' '}
-      <span aria-hidden="true" className="loading-bullet">&bull;</span>
+    <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>
     </div>
   );
 }
 
 Loader.propTypes = {
-  ariaLabel: PropTypes.string
-}
+  ariaLabel: PropTypes.string,
+};
 
 export default Loader;

src/style.css

@@ -1,3 +1,14 @@
+/* duplicate bootstrap sr-only class for users not using bootstrap/availity-uikit */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;/* 3 */
+}
 .loading-indicator {
     text-align: center;
 }