Setting keyboard focus on Lightning modal

Question

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.

Answer 1

I found a solution to this. First was to change the tabindex on the modal markup from -1 to 0. Once the modal is open, I then set my focus on the first form element (e.g., close button) rather than the outer container <div>.

Controller:

openRemoveUserModal: function(component, event, helper) {
    const modalCloseButton = component.find("modalCloseButton");
    window.setTimeout(
        $A.getCallback(function() {
           // wait for element to render then focus
           modalCloseButton .focus();
        }), 100
    );
},