-
Notifications
You must be signed in to change notification settings - Fork 12.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
PanelChrome: Fixes issues with hover header and resizing panel above #71040
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
@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. |
@axelavargas sorry, I think your right in one thing there. It's strange that the non hover header mode change (cannot be tabbed to). |
not it's the same problem there. We need to make the whole panel have focus, hmm. |
@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 |
pushed an update to KeyboardPlugin and TooltipPlugin so that they now look for the focus parent correctly, they now both work again |
btw, we also need an "active grid item" class added for new portal-into-viz tooltip strategy to work correctly. (z-index setting): cc @dprokop |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great job tackling this issue, all the a11y issues were resolved. It works as expected 🥳
…71040) * PanelChrome: Fixes issues with hover header and sizing panel above * Update * Make panel be focusable * Fix tooltip when using keyboard nav * Re-render grid when layout change to have dom positions match absolute css positions * Fix clicking panel leaves hover header open
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).
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