title: NVDA screen reader aria-live issue
body: <p>Using <code>aria-live</code> to show form field validation error dynamically. Everything works, except when moving from one field to another using down arrow key/tab the validation error is only get announced once the next file label is selected, and reads that next label name then announces the previous fields validation error.</p>
  
  <p>Code:</p>
  
  <pre><code>{!label ? null : &lt;label htmlFor={`input-${model}`} className={classnames('inputLabel', `${model.toLowerCase()}-label`)}&gt;{label}&amp;nbsp;&lt;i className={ classnames('fa','fa-asterisk', { 'isRequired' : requiredField }, { 'invisible' : !requiredField || !showAsterisk } )} aria-hidden='true'&gt;&lt;/i&gt;&lt;/label&gt;}              
              {!label ? null : &lt;br /&gt;}
              &lt;OverlayTrigger ref={(input) =&gt; { this.refPopOver = input; }} trigger={trigger} placement={popoverPlacement} overlay={popover} shouldUpdatePosition={true}&gt;
                  &lt;InputComponent model={`.${model}`}
  
                      {...extraProps} /&gt;
              &lt;/OverlayTrigger&gt;
              &lt;div id='errorRegion' aria-atomic="true" aria-live="assertive"&gt;
                  &lt;Errors
                      className={classnames('errorText', 'error', model.toLowerCase())}
                      model={`.${model}`}
                      wrapper={ErrorWrapper}
                      show="touched"
                      messages={validators.messages}
                  /&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>EDIT:
  slugolicious- thanks for you update. yes, I am using aria-live for announcing error. It works fine when using tab to go through the focusable elements. But when using browse mode using down arrow the sequence of announcing error and next label gets mixed up, I have also tried you suggestion but still the same result; its announce next label then error message of previous field. adding log of NVDA(v2017.4 &amp; v2018.1) using Firefox (59.0.2 x64) below-</p>
  
  <p><a href="https://i.stack.imgur.com/dI6k2.png" rel="nofollow noreferrer">NVDA speech viewer log</a> 
  Second Edit: before the live regions are populated</p>
  
  <pre><code>&lt;form style="position: relative;" autocomplete="off"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;div class="id-form-errors" aria-live="assertive" aria-atomic="true"&gt;
                  &lt;!-- react-empty: 170 --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12 col-sm-12" style="margin-bottom: 20px;"&gt;
              &lt;div style="position: relative;"&gt;
                  &lt;label class="inputLabel firstname-label" for="input-firstName"&gt;
                      &lt;!-- react-text: 175 --&gt;First name
                      &lt;!-- /react-text --&gt;
                      &lt;!-- react-text: 176 --&gt;&amp;nbsp;
                      &lt;!-- /react-text --&gt;
                      &lt;i class="fa fa-asterisk isRequired" aria-hidden="true"&gt;&lt;/i&gt;
                  &lt;/label&gt;
                  &lt;br&gt;
                  &lt;input name="appForms.identify.firstName" class="field fullWidth firstname-field" id="input-firstName" aria-required="true"
                      aria-describedby="firstname-popover" type="text" placeholder="First name" value=""&gt;
                  &lt;div id="errorRegion" aria-live="assertive" aria-atomic="true"&gt;
                      &lt;!-- react-empty: 181 --&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-12 col-sm-12" style="margin-bottom: 20px;"&gt;
              &lt;div style="position: relative;"&gt;
                  &lt;label class="inputLabel lastname-label" for="input-lastName"&gt;
                      &lt;!-- react-text: 185 --&gt;Last name
                      &lt;!-- /react-text --&gt;
                      &lt;!-- react-text: 186 --&gt;&amp;nbsp;
                      &lt;!-- /react-text --&gt;
                      &lt;i class="fa fa-asterisk isRequired" aria-hidden="true"&gt;&lt;/i&gt;
                  &lt;/label&gt;
                  &lt;br&gt;
                  &lt;input name="appForms.identify.lastName" class="field fullWidth lastname-field" id="input-lastName" aria-required="true"
                      aria-describedby="lastname-popover" type="text" placeholder="Last name" value=""&gt;
                  &lt;div id="errorRegion" aria-live="assertive" aria-atomic="true"&gt;
                      &lt;!-- react-empty: 191 --&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12 col-sm-12"&gt;
              &lt;button class="submitButton fullWidth disabledButton next-btn" aria-disabled="true" type="submit"&gt;Next&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>HTML After error regions are generated:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-12 col-sm-12" style="margin-bottom: 20px;"&gt;
          &lt;div style="position: relative;"&gt;
              &lt;label for="input-firstName" class="inputLabel firstname-label"&gt;
                  &lt;!-- react-text: 226 --&gt;First name
                  &lt;!-- /react-text --&gt;
                  &lt;!-- react-text: 227 --&gt;&amp;nbsp;
                  &lt;!-- /react-text --&gt;
                  &lt;i class="fa fa-asterisk isRequired" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/label&gt;
              &lt;br&gt;
              &lt;input type="text" class="field fullWidth firstname-field" placeholder="First name" id="input-firstName" aria-describedby="firstname-popover"
                  aria-required="true" name="appForms.identify.firstName" value=""&gt;
              &lt;div id="errorRegion" aria-atomic="true" aria-live="assertive"&gt;
                  &lt;!-- react-empty: 232 --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-12 col-sm-12" style="margin-bottom: 20px;"&gt;
          &lt;div style="position: relative;"&gt;
              &lt;label for="input-lastName" class="inputLabel lastname-label"&gt;
                  &lt;!-- react-text: 236 --&gt;Last name
                  &lt;!-- /react-text --&gt;
                  &lt;!-- react-text: 237 --&gt;&amp;nbsp;
                  &lt;!-- /react-text --&gt;
                  &lt;i class="fa fa-asterisk isRequired" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/label&gt;
              &lt;br&gt;
              &lt;input type="text" class="field fullWidth lastname-field" placeholder="Last name" id="input-lastName" aria-describedby="lastname-popover"
                  aria-required="true" name="appForms.identify.lastName" value=""&gt;
              &lt;div id="errorRegion" aria-atomic="true" aria-live="assertive"&gt;
                  &lt;!-- react-empty: 242 --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>3rd EDIT- Still waiting for a workable solution. Need help!</p>