Sudden unmounting leaves focus loop in place

[tillsanders]

Problem

I noticed that the current implementation leaves behind aria-hidden="true" on the top-level element when the FocusLoop component is unmounted without deactivating it first. In my case, I was using the FocusLoop component inside a modal component. When I open and close the modal, it works fine. However, when I navigate to a different page of my SPA without closing the modal first, part of the focus loop stays behind leading to accessibility issues on the entire page until I reload the tab.

Solution

Thankfully, there is an easy fix using the beforeUnmount hook:

beforeUnmount(() => {
    managePrevFocusElement(false)
    lockForSwipeScreenReader(false)
    ariaHiddenElements = []
})

Disclaimer: I did not dive into this, so there might be a better implementation. I realise that this project might not be active anymore, so I'm not opening a pull request for this and I'm moving to VueUse's integration with focus-trap. But if anyone experiences the same problem, the above should get you started on a solution.