VoiceOver not reading content in dialog

Question

For my Angular2 web app, when I launch a MdDialog, the VoiceOver screen reader for iPhone doesn't focus on the dialog and read the title. Instead it continues reading the content behind the dialog. The screen focuses on the dialog close button though.

<md-dialog-content>
  <div role="dialog" aria-labelledby="title" aria-describedby="consent-modal-content">
    <button class="dialog__close icon-close" type="button" md-dialog-close>Close</button>
    <div class="dialog__items">

      <div class="dialog__item">
        <h2 class='dialog__title' id="title">{{ title }}</h2>
      </div>

      <div class="dialog__item dialog__item--content">
        <span *ngIf="isLoading">Loading</span>
        <iframe *ngIf="content"
                id="consent-modal-content"
                oaoSrcdoc [content]="content"
                src="about:blank"
                frameborder="0"
                class="dialog__frame"></iframe>
      </div>
    </div>
  </div>
</md-dialog-content>