Bug: Focus on open gets applied to hidden elements.

[davejtoews]

When opening a modal, focus is applied to the first focusable element w/in the modal. If the first focusable element is set to display: none or otherwise hidden w/ CSS, it will attempt but fail to set focus to that element and instead apply it to the modal itself. Ideally Modal.setFocusToFirstNode() would check for visibility.

[dkniffin]

@davejtoews can you please provide a codepen that demonstrates this? Here's a template you can base it on: Codepen example

[dkniffin]

Since I never heard anything back, I'm closing this. If anyone wants it re-opened, let me know.

[davejtoews]

@dkniffin Codepen here: https://codepen.io/davejtoews/pen/YPpedyg

Note that tab navigation through the modal content is broken.

[dkniffin]

@davejtoews Thanks for the codepen. I'll look into this when I get some time.

[dkniffin]

This is related to, but not quite the same as, #340

[davejtoews]

Seems to me that there's a few related tickets caused by a built in assumption: There will be a focusable, active, and visible element near the top of the modal, not preceded by other focusable elements.

I'd see a few different ways to fix:

1. Make that assumption explicit in the documentation. Have setFocusToFirstNode() do some sanity checking to avoid invisible elements. Add a config option to override the focus action.
2. Remove the focus action altogether and require users bring their own solution - and call this out in the docs.
3. Dynamically generate a focusable element at the top of the modal, maybe hidden in some way, so that the next tab press goes to something else focusable w/in the modal if present. Just kind of a phantom item to get the focus order in the right place.

Solution 1 seems to preserve the current functionality but goes down the path of making this module a little more opinionated. Solution 2 keeps it minimal and unopinionated but creates an accessibility issue that users need to solve. Solution 3 aims for some magic to sidestep these problems but might need careful thought and testing not to introduce new accessibility problems.