title: How to fix the focus being reset to the top the page when the currently focused element is removed using ngIf in Angular?
body: <p>I am working on improving the accessibility of an Angular Application. There is a cancel button, if pressed will hide the button and display div with a warning and two buttons, yes and no. If pressed no, the warning disappears and the cancel button re-appears.</p>
  <p>I will add a small sample code snippet below. Actual code is a little complex.</p>
  <pre><code> &lt;button *ngIf=&quot;!hideCancel&quot; (click)=&quot;toggleWarning(true)&quot; &lt;/button&gt;
  
   &lt;div *ngIf=&quot;hideCancel&quot;&gt;
        &lt;p&gt;Are you sure you want to cancel?&lt;/p&gt;
   &lt;button&gt; Yes &lt;/button&gt;
   &lt;button (click)=&quot;toggleWarning(false)&quot;&gt; No &lt;/button&gt;
   &lt;/div&gt;
  
  
   toggleWarning(flag: boolean) {
      if (flag) {
          document.getElementById('someWarning').innerHTML = 'Are you sure you want to cancel?';
      } else {
           document.getElementById('someWarning').innerHTML = '';
      }
      this.hideCancel= !this.hideCancel;
   }
  </code></pre>
  <p>When using tab key and when focused on cancel button, when user presses enter key, the cancel button disappears and the below Warning appears. Then Chrome/Firefox, when I press the tab key, focus goes to the &quot;No&quot; button below the Warning as expected. But in IE, focus goes to the top of the page.</p>
  <p>I am not getting why it is happening. Is it because the currently focused element(cancel button) is removed from the DOM hence the focus is reset to the top on tabbing?
  Please help on how to prevent this in Internet Explorer.</p>