0

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.

  • can you also share a image of how is it being displayed. – User6670 Feb 3 at 19:37
  • tabindex="-1" can be an issue. either focus on the first input/button element or use positive tab index but it will have a bad user experience – Avijit Chakraborty Feb 3 at 22:17
0

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
    );
},
| improve this answer | |

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.