I've created a modal in a Lightning component, but I'm having a problem getting keyboard focus to set when the modal is displayed.
Component:
<aura:if isTrue="{!v.isRemoveUserModalOpen}">
<section aura:id="removeUserModal" role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
<div role="alertdialog" aura:id="removeUserModalPrompt" class="slds-modal slds-fade-in-open">
// modal header, body content, footer buttons
</div>
</section>
</aura:if>
My controller function fired on a button click. When the modal displays, I want the keyboard focus to be set on it.
Controller:
openRemoveUserModal: function(component, event, helper) {
component.set("v.isRemoveUserModalOpen", true);
const removeUserModal = component.find("removeUserModal").getElement();
window.setTimeout(
$A.getCallback(function() {
// wait for element to render then focus
removeUserModal.focus();
}), 100
);
},
However, the focus is still set on all form elements behind the modal.