0

According to documentation lightning-modal documentation

When the modal opens, focus goes to the first interactive element in the modal. If the header includes a link in tagline text, the link gets initial focus.

In my case I have only plain text with no interactive elements. As Modal renders, for some period of time (around 0.5 seconds), h1 tag inside the header receives :focus-visible and styles with an outline (screenshot below). And what is strange, it happens on my corporate laptop, but my personal has no such issue. (both are win 10, last updated chrome with reset of settings and no extensions) Modal with outline that shouldn't be displayed

Question: how can I avoid this initial focus-visible on header or those outline styles?

As a workaround I was able to remove the outline with static resource css, but I feel like there should be a better solution (maybe just with some browser/windows settings).

.slds-modal__header h1:focus-visible {
    outline: none;
} 

The simplified code (without apex that actually provides the body text of the modal) is below

// app.js
import { LightningElement } from 'lwc';
import testmodal from 'c/testmodal';

export default class App extends LightningElement {

  message;
    
  connectedCallback() {
    this.message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
    testmodal.open({
        headerLabel: 'Test Modal Header',
        bodyText: this.message,
        size: 'small'
    });
  }
}
// app.html
<template>
</template>
// testmodal.js
import { api } from "lwc";
import LightningModal from 'lightning/modal';

export default class Modal extends LightningModal {
    @api bodyText = '';
    @api headerLabel = '';
}
// testmodal.html
<template>
    <lightning-modal-header label={headerLabel}></lightning-modal-header>
    <lightning-modal-body>
        <lightning-formatted-rich-text value={bodyText}></lightning-formatted-rich-text>
    </lightning-modal-body>
</template>

1 Answer 1

0

Focus can be control using tabindex.

Add tabindex="-1" if you want to disable.

<lightning-modal-header label={headerLabel} tabindex="-1"></lightning-modal-header>

Reference:

https://web.dev/control-focus-with-tabindex/

https://stackoverflow.com/questions/3682812/disabling-tab-focus-on-form-elements

1
  • I tried that, but it didn't help. Moreover, h1 tag renders already with tabindex="-1" <h1 class="slds-modal__title slds-hyphenate" id="modal-label-73" tabindex="-1" data-label="">Test Modal Header</h1> I am confused the most why it's not reproducible on different machines.
    – sfrazlond
    Aug 19, 2023 at 20:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .