Global callbacks / events every time a dialog opens / closes

[RomkeVdMeulen]

I'm submitting a feature request

• Library Version: 2.0.0-rc6

Expected/desired behavior:

• What is the expected behavior? I'd like to have global beforeOpen / afterOpen / afterClose events / callbacks / whatever that get called everytime a dialog opens or closes.

• What is the motivation / use case for changing the behavior? I'm working on focus management for our dialogs. WAI-ARIA Dialog Authoring Practices require that focus is placed inside the dialog once it opens, and is returned to the last focused item once it closes.
  Currently, there is no easy way to implement this. The new native dialog renderer helps, but only in Chrome with native support: the polyfill does not handle this out of the box.
  So I want to write callbacks that register the last focused item before a dialog opens, places focus once the dialog is open, and returns focus to the last item after the dialog has closed.

There's a couple of ways this could be handled. The DialogService could accept subscribers for each of the events and call them when appropriate. Or events could be published on the EventAggregator. Or perhaps there's another API I haven't thought of.

[RomkeVdMeulen]

@EisenbergEffect @StrahilKazlachev Any thoughts on this? If there are better ways to solve this I'd be happy to change the proposal.

[bigopon]

@RomkeVdMeulen beforeOpen sounds like activate and afterOpen sounds like attached to me. Is this correct?

[RomkeVdMeulen]

For individual dialogs, yes. But I want to implement behaviour for every dialog.

I could put those hooks in a base class and extend every dialog from that, but that isn't the most elegant way of implementing a cross-cutting concern.

[StrahilKazlachev]

So if you need to do something immediately before/after the dialog gets added/removed to/from the DOM, you can use a custom Renderer. You should be able to extend the default ones, override showDialog/hideDialog and register your Renderer. Here the Renderer is the piece that adds/removes the "dialog" from the DOM. showDialog/hideDialog are the closest points to the DOM manipulation that I can think of, excluding writing a dedicated Renderer.

[bigopon]

@RomkeVdMeulen I was expecting the concern you raised, thanks for putting it plainly. How would you, even with some pseudo code, solve your issue with events?

[RomkeVdMeulen]

@bigopon Something like:

dialogService.beforeOpen((dialog) => {
  dialog.lastFocused = document.querySelector(":focus");
});

dialogService.afterClose((dialog) => {
  dialog.lastFocused.focus();
});

@StrahilKazlachev Interesting. I'll look into that.

You know, come to think of it: shouldn't the behaviour of returning focus after the dialog closes be built into aurelia-dialog itself? It seems important to have the plugin produce accessible dialogs out of the box, without having to add some listeners yourself.

Perhaps I should open a separate bug for this?

[StrahilKazlachev]

The way all this is designed is that all DOM related work should go in a Renderer or some custom element in the "dialog" itself. Also I think that currently the Renderer is the weakest link in the whole concept.

[RomkeVdMeulen]

I'm going to assume we want to bake this behavior in somewhere in stead of leaving it to the user.

I'll open a separate bug for that.