fix: a11y issues and adjusting unit tests to match.

build/index.html

@@ -11,16 +11,16 @@ <h1>Loading Indicator Demo</h1>
     <p>Styled using the Elements SDK.</p>
     <br />
     <h2>Initialized and instantiated via ReactIntl components</h2>
-    <p><button onClick="toggleLoader('ex1')">Toggle loader</button>
+    <p><button onClick="toggleLoader('ex1')" type="button">Toggle loader</button>
     <div id="app"></div>
 
     <h2>Initialized and instantiated via event (attached to body)</h2>
     <p>Full page loading indicator will appear for 5 seconds and then switch off</p>
-    <button onClick="loadBody()">Body Loading</button>
+    <button onClick="loadBody()" type="button">Body Loading</button>
     <div id="bodyAttach"></div>
 
     <h2>Initialized and instantiated via event (attached to DOM Element)</h2>
-    <button onClick="loadDOM()" id="domLoader">DOM Loading</button> <button onClick="toggleLoader('ex3')">Toggle loader</button>
+    <button onClick="loadDOM()" id="domLoader" type="button">DOM Loading</button> <button onClick="toggleLoader('ex3')" type="button">Toggle loader</button>
     <div id="loaderAttach" style="width: 600px; height: 600px;">
       <p>Here is some text that should appear washed out when the loading indicator is displayed.</p>
       <p><a href="https://www.google.com">Here is a link to Google that you shouldn't be able to click on</a></p>

src/js/component-owner.js

@@ -26,8 +26,8 @@ class ComponentOwner extends Component {
       chipVertPos: 0
     };
 
-    this.toggleLoader = _toggleLoader.bind(this);
-    this.toggleTabbableItems = _toggleTabbableItems.bind(this);
+    this.toggleLoader = this.toggleLoader.bind(this);
+    this.toggleTabbableItems = this.toggleTabbableItems.bind(this);
 
     document.body.addEventListener('o.LoadingIndicatorToggle.' + props.id, () => {
       this.toggleLoader();
@@ -44,6 +44,21 @@ class ComponentOwner extends Component {
     )
   }
 
+  toggleLoader() {
+    const newActive = this.state.active === 'true' ? 'false' : 'true';
+    this.setState({ active: newActive,
+      tabElements: this.toggleTabbableItems(newActive)
+    });
+  };
+
+  toggleTabbableItems(newActive) {
+    const tabElementArr = this.state.tabElements;
+    for (let i = 0; i < tabElementArr.length; i++) {
+      tabElementArr[i].tabIndex = newActive === 'false' ? 0 : -1;
+    }
+    return tabElementArr;
+  }
+
   componentDidMount() {
     const chipHeight = 70;
     const windowVert = Math.floor((window.innerHeight - chipHeight) / 2);
@@ -74,14 +89,16 @@ class ComponentOwner extends Component {
     const childrenContent = children ? (<div aria-hidden={this.state.active} className={'loadingIndicatorContent-' + this.props.id}>{children}</div>) : this.convertToJSX(htmlString);
 
     return (
-      <div className="pe-loadingIndicator" aria-live="assertive">
+      <div className="pe-loadingIndicator">
         <div className={overlayStyle + activeStyle}>
           <div className="pe-loadingIndicator-chip" style={chipStyle}>
             <LoadingSpinner />
             <div className="pe-loadingIndicator-chip-text">{data.text.chipText}</div>
           </div>
         </div>
-        {childrenContent}
+        <div aria-live="polite" aria-busy={active}>
+          {childrenContent}
+        </div>
       </div>
     )
   }
@@ -90,18 +107,3 @@ class ComponentOwner extends Component {
 
 
 export default ComponentOwner;
-
-export function _toggleLoader() {
-  const newActive = this.state.active === 'true' ? 'false' : 'true';
-  this.setState({ active: newActive,
-    tabElements: this.toggleTabbableItems(newActive)
-  });
-};
-
-export function _toggleTabbableItems(newActive) {
-  const tabElementArr = this.state.tabElements;
-  for (let i = 0; i < tabElementArr.length; i++) {
-    tabElementArr[i].tabIndex = newActive === 'false' ? 0 : -1;
-  }
-  return tabElementArr;
-};

test/component-owner.test.js

@@ -34,7 +34,7 @@ describe('Loading Indicator Suite (loader on portion of screen)', function() {
   });
 
   it('renders the overlaid content', function () {
-    const testStr = this.wrapper.nodes[0].props.children[1].props.children.type;
+    const testStr = this.wrapper.nodes[0].props.children[1].props.children.props.children.type;
     expect(testStr).toEqual('p');
   });
 
@@ -66,7 +66,7 @@ describe('Loading Indicator Suite (full screen loader)', function() {
   });
 
   it('renders the overlaid content', function () {
-    const testStr = this.wrapper.nodes[0].props.children[1].props.children.type;
+    const testStr = this.wrapper.nodes[0].props.children[1].props.children.props.children.type;
     expect(testStr).toEqual('p');
   });
 
@@ -101,7 +101,7 @@ describe('Loading Indicator Suite (loader off to start, children as props)', fun
   });
 
   it('renders the overlaid content', function () {
-    const testStr = this.wrapper.nodes[0].props.children[1].props.dangerouslySetInnerHTML.__html;
+    const testStr = this.wrapper.nodes[0].props.children[1].props.children.props.dangerouslySetInnerHTML.__html;
     expect(testStr).toEqual('<p>Children Content</p>');
   });