search

elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.58k stars 8.21k forks source link

Tabbing through forms with stacked header or bottom bar is unpleasant #100238

Open justinkambic opened 3 years ago

justinkambic commented 3 years ago

Kibana version: 7.13.0

Elasticsearch version: 7.13.0

Server OS version: macOS

Browser version: Firefox 88

Browser OS version: macOS

Original install method (e.g. download page, yum, from source, etc.): from source

Describe the bug: When tabbing through the integrations view, when the focus goes to an element below the fold or above the viewport the highlighted element tends to be hidden. Without scrolling this can be an unpleasant UX.

Steps to reproduce:

  1. Navigate to the integrations page
  2. Begin inputting values
  3. Tab below the fold
  4. Shift+tab above the viewport
  5. See that it's hard to tell where the focus went

Expected behavior: The viewport should adjust to keep the focused element visible below the Kibana top nav and above the bottom bar.

Screenshots (if relevant): May-17-2021 15-41-01

Errors in browser console (if relevant): N/A

Provide logs and/or server output (if relevant): N/A

Any additional context: This problem is likely not localized to the Synthetics integration.

elasticmachine commented 3 years ago

Pinging @elastic/fleet (Team:Fleet)

elasticmachine commented 3 years ago

Pinging @elastic/uptime (Team:uptime)

jen-huang commented 3 years ago

I don't think this behavior is specific to Fleet, I did a quick test in another part of Kibana, Advanced Settings, and found the same behavior. That UI doesn't have a bottom bar, but the focus can get lost in an element that's covered by the breadcrumbs bar. @elastic/eui-design Do you have any recommendations?

May-17-2021 16-36-23

justinkambic commented 3 years ago

@jen-huang I've updated the issue's title to make it more general, thanks.

elasticmachine commented 3 years ago

Pinging @elastic/kibana-design (Team:Kibana-Design)

cchaos commented 3 years ago

This happens because the headers are fixed position against the window body and the window body is what scrolls (so it's top bounds is technically below the header at 0,0). I don't really know how to get around this since browsers are what controls the auto-scroll to focused content and it has no knowledge of fixed elements. I'm currently working through some ideas to change this from fixed to sticky, but nothing will change immediately and there's a big cascade effect.