Aurelia-Dialog - focus management

Help Requests
1

Hello,

I am using aurelia-dialog and I was hoping there is a setting to maintain focus within the dialog when it is open to meet accessibility requirements. I saw issue #375 which seems to say this has been addressed with issue #338 but I am not having any luck.

Reading through #338, I tried to to use the NativeDialogRenderer noted in the issue but I am getting an error “Uncaught Error: DialogRenderer must implement getDialogContainer()” when trying to display the dialog in the browser.

I may not be implementing things correctly. I am using version 2.0.0-rc.6 and here is what I have going on in main.js

import '@babel/polyfill';
import environment from './environment';
import {PLATFORM} from 'aurelia-pal';
import * as Bluebird from 'bluebird';
import { NativeDialogRenderer } from 'aurelia-dialog';

Bluebird.config({ warnings: { wForgottenReturn: false } });

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('lib/index'))
    .plugin(PLATFORM.moduleName('aurelia-animator-css'))
    .plugin(PLATFORM.moduleName('aurelia-dialog'), config => {
      config.settings.startingZIndex = 5;
      config.settings.keyboard = true;
      config.useDefaults();
      config.useCSS('');
      config.settings.centerHorizontalOnly = true;
      config.useResource('attach-focus');
      config.useRenderer(NativeDialogRenderer);
    });

  aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  return aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

Or maybe the focus management has not been implemented?
Thanks,
Wendee

1 Like
2

UPDATE - I moved the config.userRenderer(NativeDialogRenderer); to the top of the list and the dialog did display without any errors. HOORAY!!!

BUT… focus still leaves the when tabbing through the focusable element of the dialog. Drat!

1 Like
3

You don’t have to import it, you can just do:

useRenderer('native')

I believe. Can you try that? It’s one of the official API. If it works fine, don’t forget to remove the import :smiley:

4

Thanks @bigopon! I removed the import and tried your suggestion. The dialog load without issue but the the focus still does not remain in the dialog.

1 Like
5

Yes, i believe the latest changes from the PR you mentioned havent been released yet. Lets ping @EisenbergEffect a bit

1 Like
6

Oh! that could be good news for me and I can keep my sanity. :smile:

1 Like
7

@bigopon Any news about this. I tried to use this native renderer without success. Not sure how to remain focus in the dialog?

1 Like
8

Im sure its been released with the focus restoration feature. What version are you using?

9

I am using “aurelia-dialog”: “^2.0.0”
Not sure how to change dialog to ensure that focus will remain in the dialog?
Do I need to switch to native renderer?
Do I need to use ‘attach-focus’ on elements? Thanks

1 Like
10

Can you clarify what you meant with “remain focus in the dialog”? Is it when you open or when you close a dialog? If you want to move the focus to some element when opening the dialog, attach-focus is the one.

11

I think what he means is a restriction so that users can’t “tab” out of the dialog, focus should keep cycling between components inside the dialog while the dialog is active.

1 Like
12

@khuongduybui Exactly. Currently user can “tab” out of the dialog. Not sure how to prevent this.

1 Like
13

@bigopon I managed to make it work by using this third party library:

3 Likes
14

@khuongduybui thanks, I didn’t realize that until your reply.
@radenkozec glad to hear that :+1:

15

If you use aurelia-dialog with the NativeDialogRenderer it uses the HTML <dialog> element which handles focus automatically. This can be polyfilled for browsers that don’t support it (why Safari, why? :man_facepalming:).

It can be enabled like this:

import { NativeDialogRenderer } from 'aurelia-dialog';

aurelia.use.plugin('aurelia-dialog', (config: DialogConfiguration) => {
  config.useDefaults();
  config.useRenderer(NativeDialogRenderer)
})

I’d like this to be the default in Aurelia v2 as it gives much better default UX, especially for screen readers!

3 Likes
16

Firefox also did not turn on native dialog by default.

BTW, I have been working on a tiny cut-off version of aurelia-dialog called aurelia-dialog-lite.

How tiny? 250 LOC vs 1000+.

It got focus-trap out of the box without using native dialog element, also simplified css and layout so users can control that aspect. I have migrated all my apps to it. For a reference open-sourced app, check out the source code of dumber-gist IDE.

But the APIs are not compatible with aurelia-dialog. Don’t migrate if you are not sure.

The doc (the readme file) is only half done. But I have no plan to introduce more breaking changes.

3 Likes
17

I will definately check this out. I created a wrapper around aurelia-dialog to do what I want. It might be time to abandon aurelia-dialog completely with either your approach or something home grown.

1 Like
18

With <dialog> element it is really simple to roll your own implementation.

2 Likes
19

It is quite easy to roll your own dialog implementation and trap focus manually but we should really be striving for something that excels on the accessibility front too.

As far as I understand it, the <dialog>element gets special treatment from screen readers.

1 Like