Aurelia-Dialog - focus management

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

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

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:

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

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

1 Like

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

1 Like