Keyboard.trapFocus() can't handle dynamically added elements

[ky940819]

What should happen?

When focusable elements are added to an area within the focus trap, they should be focusable, even if they were inserted before what was the "first", or after what was the "last" focusable element at the time the trap was established.

What happens instead?

If focusable elements are added to an area under a focus trap, and those elements are added either before the "first" focusable element, or after the "last" focusable element, it is impossible to achieve focusing via the keyboard.

Possible Solution

When a focus trap is established, a mutation observer can be added.
In the event that nodes were added or removed then the findFocusable($element), method can be run again and the first and last elements variables can be updated.

Specifically, this block should be re-executed on mutations:

foundation-sites/js/foundation.util.keyboard.js

Lines 139 to 141 in 4e6c218

	var $focusable = findFocusable($element),
	$firstFocusable = $focusable.eq(0),
	$lastFocusable = $focusable.eq(-1);

Test Case and/or Steps to Reproduce (for bugs)

https://codepen.io/ky940819/pen/BapREPy

Context

The specific situation is an off-canvas area containing a search which shows the results dynamically in-page.
When focus trap is enabled for the off canvas area the results are not focusable because the search button was the last focusable item on the page when the trap was initialized. The search results are dynamically added after that content.

I was able to create a workaround by releasing the focus trap on DOM changes, and then re-acquiring the trap.

Your Environment

• Foundation version(s) used: 6.6.3
• Browser(s) name and version(s): Chrome/FF on windows and linux, Safari on OSX

Checklist

• I have read and follow the CONTRIBUTING.md document.
• There are no other issues similar to this one.
• The issue title and template are correctly filled.

PS

Looking through other tickets about focus traps, this should be recalculated not just if elements are added, but if any DOM changes occur within a focus trap that would effect the order of the elements, for example, a change to the tabindex, or a change to the elements visibility, or anything else that might change what the first and last focusable elements inside the trap are.

[joeworkman]

I am able to tab to un-tabbable link in your demo.

[akashchandran707]

Hi @joeworkman, I'm also facing the same issue with version 6.7.4.

Also I'm able to reproduce it In the demo which @ky940819 provided.

Could you please check this again?