1

Update 10/25

I have a modal that I am creating when a user clicks on a lighting card. For accessibility reason I need the focus to remain in the modal until the user clicks Dismiss or hits the escape key.

For some reason the focus exits the modal and start focusing through the page content when i hit the tab key.

I've tried to custom code this issue and got to the point where I submitted a ticket to Salesforce.

Unfortunately this is a known issue https://success.salesforce.com/issues_view?id=a1p3A000001SH48QAG.

I've also tried to import a third party library to try and resolve this issue. (https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html)

JAVA SCRIPT FILE Open Modal

import { loadScript } from 'lightning/platformResourceLoader';
import DIALOG_JS from '@salesforce/resourceUrl/dialog';

dialogjsInitialized;

      renderedCallback() {
          if (this.dialogjsInitialized) {
              return;
          }
          this.dialogjsInitialized = true;

          loadScript(this, DIALOG_JS)
          .then(() => {
              this.initializeModal();
          })
          .catch(error => {
              this.error = error;
          });        
      }

      @api openModal() {
          alert("openDialog");

          dialog.openDialog('dialog1', this);

          alert("finished openDialog");
      }

      initializeModal() {
          dialogjsInitialized = false;
      }    

      @api closeModal() {
        dialog.closeCurrentDialog();
      }
}

HTML FILE Open Modal

<div role="dialog"
     id="dialog1"
     aria-labelledby="dialog1_label"
     aria-modal="true"
     class="hidden">
  <h2 id="dialog1_label" class="dialog_label">
    My Modal
  </h2>
.....
</div>

For some reason when I try and utilize the dialog .close or dialog .open nothing happens, and I don't see an error on on the console, log or browser. What might be going wrong? How can I further debug?

I have uploaded the dialog.js as a static resource that was provided on the W3.

Do I need to make modifications to that file and put it in a LWC JavaScript format?

Can I not just upload the JavaScript As Is?

0

You've got a couple of issues happening.

First, keep in mind that SDLS Modals only include CSS styles, but not the Javascript necessary to implement most of the keyboard and focus requirements. The issue you linked to will most likely get closed because SLDS would not include the necessary javascript.

Unfortunately, there is not an LWC equivalent to the Aura lightning:overlayLibrary, but you can wrap your LWC component in an Aura component that implements lightning:overlayLibrary.

You are also on the right track by looking at how the W3C ARIA examples function, however, you won't be able to use the Javascript from the W3C directly. Since you didn't post the specific code, but linked to the W3C script, I can only assume you used it without modification. In which case you will need to modify it to be compatible with the modal markup you used.

  • Thanks David for getting back on this issue. I actually submitted a ticket to Salesforce and they said they don't have a resolution but are working on one. I'll up date my question with more content to see if that might help – Mariano Michel Oct 25 '19 at 16:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.