[dialog] Accessible title and description

[anezthes]

To create an accessible dialog, you typically do something like this:

<div role="dialog" aria-labelledby="title" aria-describedby="desc">
   <h2 id="title">Title</h2>
   <p id="desc">Description</p>
   ...

It'd be great if you, in Flow, could do either of the following:

Alt 1

// Generates an h2, with an id, used for the dialog's aria-labelledby.
dialog.setTitle("Title");

// Generates a paragraph with an id, used for dialog's aria-describedby.
dialog.setDescription("Desc");

Alt 2

H2 title = new H2("Title");
title.setId("title");

Paragraph desc = new Paragraph("Description");
desc.setId("desc");

// Maps dialog's aria-labelledby to title's id.
dialog.setTitle(title);

// Maps dialog's aria-describedby to desc's id.
dialog.setDescription(desc);

Perhaps there's an easier way, but here's my current workaround:

H2 title = new H2("Title");
title.setId("title");

Paragraph desc = new Paragraph("Description");
desc.setId("desc");

Dialog dialog = new Dialog(title, desc) {
  @Override
  protected void onAttach(AttachEvent attachEvent) {
    super.onAttach(attachEvent);
    getElement().executeJs("this.$.overlay.setAttribute('aria-labelledby', $0)", title.getId().get());
    getElement().executeJs("this.$.overlay.setAttribute('aria-describedby', $0)", desc.getId().get());
  }
};