PanelChrome: Fixes issues with hover header and resizing panel above

[torkelo]

Noticed an issue with the hover header preventing me from resizing the panel above. This was due to the fact that the hover header is always there just with opacity 0 (placed above panel overlapping the resize element).

• Fixed by setting visibility to hidden when opacity is 0
• Removed unused emotion css class "hidden"
• Removed left over logic that removed show-on-hover class when menu was opened, this logic was not working as the setMenuOpen callback was never called as PanelMenu never called onVisibleChange (so removed this).

Also required changes to

• Make PanelChrome itself have focus instead of VizLayout (this is to make sure the hover header actions & menu can be focused)

[axelavargas]

Hey @torkelo 👋🏾 , I gave it a spin, and found out that the changes break a11y when using the keyboard 😢 , I am attaching the video with the current behavior, at the end of the video you can see how it looks in play grafana.

P.S The menu should be accessible using the keyboard, this issue was fixed here: #69861

A11yIssuesOnPanelHeader.mp4

[torkelo]

@axelavargas I think that is because the keyboard navigation is done a bit strangly, the panel itself should be focused and then the menu should show up. This was how I described keyboard navigation (so you can focus any panel (independent of visualization)), preferably move focus around using arrow keys (once a panel has focus).

Anyway not sure I can solve that a11y without this big change to panel focus / keyboard navigation. Maybe we can open a follow-up PR and address that separately? as this bug is pretty big/annoying. we can fix it first.

[torkelo]

@axelavargas sorry, I think your right in one thing there. It's strange that the non hover header mode change (cannot be tabbed to).

[torkelo]

not it's the same problem there. We need to make the whole panel have focus, hmm.

[torkelo]

@axelavargas @kaydelaney I fixed the issue by making the PanelChrome be focusable (this is what I always thought makes the most sense, compared to VizLayout).

I was against making VizLayout be the element that has focus as it should be the whole panel not the inner layout element (#42244 (comment))

The keyboard navigation for the time range line still works after moving focus to PanelChrome, but the tooltip is not shown. will investigate that

[torkelo]

pushed an update to KeyboardPlugin and TooltipPlugin so that they now look for the focus parent correctly, they now both work again

[leeoniya]

btw, we also need an "active grid item" class added for new portal-into-viz tooltip strategy to work correctly. (z-index setting):

https://github.com/grafana/grafana/pull/70872/files#diff-8b78102d87c552bbe06c1e3887b7bb6c1bf2742c92d94431433daf9e3aaa5899R109

cc @dprokop

[axelavargas]

Great job tackling this issue, all the a11y issues were resolved. It works as expected 🥳