Skip to content
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

UI Actions popover not working properly with keyboard #67130

Closed
Tracked by #71854
timroes opened this issue May 20, 2020 · 2 comments · Fixed by #70705
Closed
Tracked by #71854

UI Actions popover not working properly with keyboard #67130

timroes opened this issue May 20, 2020 · 2 comments · Fixed by #70705
Assignees
Labels
bug Fixes for quality problems that affect the customer experience Feature:UIActions UI actions. These are client side only, not related to the server side actions.. impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. loe:medium Medium Level of Effort Project:Accessibility

Comments

@timroes
Copy link
Contributor

timroes commented May 20, 2020

Currently if there are more then one drilldown and the popover will be shown to let the user select which action to trigger, the popover will simply pop up at the current mouse position. That does not work if the user would use keyboard to navigate Kibana. At that point you'll end up with potentially random popover positions, like seen in the following screenshots:

Screenshot 2020-05-20 at 17 33 53

If the mouse might be outside the browser window it can even render this weird popover that's now not attached to "anything" on the page anymore:

Screenshot 2020-05-20 at 17 35 09

This is an accessibility breakage. Since the ui actions system never has an idea what was actually clicked that triggered that ui Action I suggest either (or both) of the following solutions:

  • Let the consumer who emits the uiAction explicitly set a DOM element and an x/y-offset within that. That way every embeddable can take care of how this position should be chosen. The x/y offset would be needed, since potentially an embeddable could just use one <canvas> element to render and thus just passing a DOM element is not really precise enough. I would not pass an event here, since ui actions should not make any assumptions on what kind of event would trigger a filter (it could be a mouse event, a keyboard event, a click event, or potentially anything else).
  • Make the "autodetection" logic a bit smarter. We could e.g. not only track the mouse, but when we want to open the popover first check if there is a focused element on the page. Check if that element is within that embeddable's panel and if so, use that as a source, if the mouse is outside the panel. If there is none, I'd still suggest we use the mouse coordinates but clamp them to the embeddable's panel, so it's not completely placed randomly, but at least attached to some corner of the panel.

cc @stacey-gammon @ppisljar @streamich @flash1293

Part of #71854

@timroes timroes added bug Fixes for quality problems that affect the customer experience Project:Accessibility Team:AppArch Feature:UIActions UI actions. These are client side only, not related to the server side actions.. labels May 20, 2020
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app-arch (Team:AppArch)

@Dosant
Copy link
Contributor

Dosant commented May 26, 2020

Noticed couple related issues which likely could be addressed by fixing original a11y issue:

  1. Since we don't track target element and menu is opened async, mouse pointer could move to different position and menu would be opened there:

May-26-2020 12-04-45

  1. Probably because of mousemove / mouseenter usage, this menu doesn't work great on mobile. It doesn't open in the correct position from the first attempt

  2. Focus isn't moved inside the menu

  3. this global event listener for pointer position: https://github.com/elastic/kibana/blob/master/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx#L55 is initialised 17 times (probably because how bundling and static code works)

@Dosant Dosant added impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. loe:medium Medium Level of Effort triaged labels May 26, 2020
@Dosant Dosant self-assigned this Jul 3, 2020
@streamich streamich mentioned this issue Jul 15, 2020
26 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Fixes for quality problems that affect the customer experience Feature:UIActions UI actions. These are client side only, not related to the server side actions.. impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. loe:medium Medium Level of Effort Project:Accessibility
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants