LWC Modal Losing Focus

Question

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?

Answer 1

Winter '23 includes a new lightning-modal component that addresses this issue out-of-the-box.

Here's an example:

Calling Component

// JS
import { LightningElement } from 'lwc';
import MyModal from 'c/MyModal';

export default class MyComponent extends LightningElement {

    handleOpenModal() {
        MyModal.open();
    }

}

// HTML
<template>
    <lightning-button label="Open Modal" onclick={handleOpenModal}></lightning-button>
</template>

Modal

// JS
import LightningModal from 'lightning/modal';

export default class MyModal extends LightningModal {

    handleSave() {
        this.close();
    }

}

// HTML
<template>
    <lightning-modal-header label="Update Account"></lightning-modal-header>
    <lightning-modal-body>
        <lightning-record-edit-form object-api-name="Account">
            <lightning-messages></lightning-messages>
            <lightning-input-field field-name="Name"> </lightning-input-field>
            <lightning-input-field field-name="Phone"> </lightning-input-field>
            <lightning-input-field field-name="BillingAddress"></lightning-input-field>
        </lightning-record-edit-form>
    </lightning-modal-body>
    <lightning-modal-footer>
        <lightning-button label="Save" onclick={handleSave}></lightning-button>
    </lightning-modal-footer>
</template>

Answer 2

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.