Media Library: Reset state when losing focus

Bug Description

If we open the media element dropdown menu from keyboard and then close it by pressing Esc key, the focus moves to the canvas but the media dropdown (3 dots) button keeps visible. ( See attached video )

Addition: pressing Esc doesn’t reset the element tabindex, so when someone tries to refocus the media element, it doesn’t start with the first element. ( See 2nd video )

Expected Behaviour

Pressing onEsc key either should refocus the media element, or it shouldn’t show the menu button when the focus gets moved to the canvas; plus it should reset the tabindex.

Steps to Reproduce

1. Focus any media element
2. Press Space key
3. Press Esc key

Screenshots

https://user-images.githubusercontent.com/17360543/144904883-59c130f3-0a40-4b66-9cd4-ca0768a5145e.mov

https://user-images.githubusercontent.com/17360543/144904924-c9190aa2-9e3e-444f-9fec-57841ab6c490.mov

Additional Context

• Plugin Version: 1.16.0-alpha.0
• WordPress Version: 5.8.2
• Operating System: macOS Monterey (M1)
• Browser: Chrome

[swissspidy]

Hmm I suppose that makes sense 🤔

We can consult with a11y folks if this comes up again.

[miina]

At least that’s what I thought! I believe that’s how the roving tab index util and also custom navigation handlers are implemented currently. But perhaps it was always a bug, I just didn’t know.

I can create a general issue for it if it’s a bug – we’re using the same logic everywhere currently, in all library panes, in color picker, calendar, etc.

E.g. when I tab out of the library (or a group of colors in the color picker) and then click Shift + Tab to get back, I’d expect to jump back to where I was. If we’d reset the tab indexes when losing focus, I’d end up on the first element instead.

Thoughts?