Skip to content

Commit

Permalink
Remove options when ending focus management
Browse files Browse the repository at this point in the history
  • Loading branch information
JelloBagel committed Jun 13, 2024
1 parent 12580f9 commit b8a107f
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 2 deletions.
41 changes: 40 additions & 1 deletion src/__tests__/focus-zone.test.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {FocusKeys, FocusZoneSettings, focusZone} from '../focus-zone.js'
import {fireEvent, render} from '@testing-library/react'
import {fireEvent, render, screen} from '@testing-library/react'

Check failure on line 2 in src/__tests__/focus-zone.test.tsx

View workflow job for this annotation

GitHub Actions / lint

'screen' is defined but never used
import React from 'react'
import userEvent from '@testing-library/user-event'

Expand Down Expand Up @@ -751,3 +751,42 @@ it('Should ignore disabled elements after focus zone is enabled', async () => {

controller.abort()
})

it('Should handle elements being removed if strict', async () => {
const user = userEvent.setup()
const {container} = render(
<div>
<button tabIndex={0} id="outside">
Outside Apple
</button>
<div id="focusZone">
<button tabIndex={0}>Apple</button>
<button tabIndex={0}>Banana</button>
<button tabIndex={0}>Cantaloupe</button>
</div>
</div>,
)

const focusZoneContainer = container.querySelector<HTMLElement>('#focusZone')!
const [firstButton, secondButton, thirdButton] = focusZoneContainer.querySelectorAll('button')
const outsideButton = container.querySelector<HTMLElement>('#outside')!
const controller = focusZone(focusZoneContainer, {strict: true})

firstButton.focus()
await user.keyboard('{arrowdown}')
expect(document.activeElement).toEqual(secondButton)

outsideButton.focus()
focusZoneContainer.removeChild(secondButton)

// The mutation observer fires asynchronously
await nextTick()

await user.tab()
expect(document.activeElement).toEqual(firstButton)

await user.keyboard('{arrowdown}')
expect(document.activeElement).toEqual(thirdButton)

controller.abort()
})
2 changes: 1 addition & 1 deletion src/focus-zone.ts
Original file line number Diff line number Diff line change
Expand Up @@ -524,7 +524,7 @@ export function focusZone(container: HTMLElement, settings?: FocusZoneSettings):
for (const mutation of mutations) {
for (const removedNode of mutation.removedNodes) {
if (removedNode instanceof HTMLElement) {
endFocusManagement(...iterateFocusableElements(removedNode, iterateFocusableElementsOptions))
endFocusManagement(...iterateFocusableElements(removedNode))
}
}
// If an element is hidden or disabled, remove it from the list of focusable elements
Expand Down

0 comments on commit b8a107f

Please sign in to comment.