Adding focus inside dialog for accessibilty

Question

I have a dialog in my aurelia app that when I click the link to have the dialog appear, the focus goes back to the top of the page. I have given it role="dialog" aria-labelledby="aboutHeader" aria-describedby="versionNumber" but the screen reader does not recognize the dialog. How can I put a keyboard focus on the dialog so that when I click "About" the next tab on my voiceover is inside the dialog, and on closing the dialog how do I get it back to the last focus of the "About" link?

<ux-dialog role="dialog" aria-labelledby="aboutHeader" aria-describedby="versionNumber">
      <ux-dialog-header><h2 id="aboutHeader">Header</h2></ux-dialog-header>

    <ux-dialog-body style="max-width: 750px;">
        <p id="versionNumber">Version Number</p>
        <p>Copyright Info Here</p>
    </ux-dialog-body>

    <ux-dialog-footer>
      <button click.trigger="controller.close()">Close</button>
    </ux-dialog-footer>
  </ux-dialog>

Answer 1

Thanks for all the feedback, it was helpful. For this particular instance, I was able to add a ref="aboutButton" attribute to the h2 element and inside my ViewModel I added this.aboutHeader.focus() inside the attached() component lifecycle which is invoked once the component is attached to the DOM.