Navigation block submenus inaccessible on IE

[tellthemachines]

Describe the bug

On IE11, Navigation block submenu dropdowns don't open when the parent block is hovered or focused. The focus behaviour is relying on :focus-within, which isn't supported on IE, but I'm not sure why the hover functionality also doesn't work.

Because the styles for hiding the dropdown use visibility: hidden there's also a risk it won't be accessible on screen readers if using IE.

To reproduce
Steps to reproduce the behavior:

1. Create a new post.
2. Add navigation block and create a submenu for one of the items.
3. On IE, try to access the submenu by hovering or focusing on the parent item.
4. Verify that submenu remains hidden.

Expected behavior

Expected submenu to be accessible on IE.

Screenshots

[noisysocks]

This is tough to fix, yeah? Would a different design approach to submenus help? cc. @karmatosed

[karmatosed]

@noisysocks just noting here that @enriquesanchez is going to take a look at this and see what can be done.

[enriquesanchez]

I was able to hover on the submenu items but only if I was quick to move my mouse to that area:

Perhaps if we introduced a delay before the submenus fade out this could get fixed?

[tellthemachines]

The hover was fixed for IE with #21471 (we might need to adjust the hover area a bit so it works better, but at least it works now), but focus is still not working at all, because we're using the focus-within selector which is not supported in IE.

We can fix this by tracking when focus is inside the dropdown and adding a classname to the parent that we can then attach the focus styles to. It should be fairly straightforward.