mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
8fec139c78
Closes https://github.com/elastic/kibana/issues/135458 Unblocks https://github.com/elastic/kibana/issues/151233 ## Summary This PR adds the floating actions back into the regular HTML tree by removing the `EuiPortal` that surrounded them, thus making them keyboard accessible via some added CSS.  In order to do this, however, there were a few changes that had to be made to the overall Dashboard HTML structure. Previously, as part of [relocating the Dashboard scrollbar](https://github.com/elastic/kibana/pull/145628), the scrollable section of the app was moved to the Dashboard viewport, like so: https://user-images.githubusercontent.com/8698078/222511861-8707917c-9edc-4292-a182-58924bb00c8a.mov <br> While this had a lot of visual appeal, because of the structure of the HTML tree, the floating actions had to be moved to an `EuiPortal` as part of this change so that they would continue to float above the top navigation bar rather than clipping behind it alongside the other contents of the viewport - this made it impossible to add native keyboard accessibility since they were removed from the natural HTML structure. Unfortunately, by removing the `EuiPortal` in order to allow for keyboard accessibility, this meant that the scrollable section could **no longer** be constrained to the viewport - this is because the `z-index` of child of a given scrollable `div` is **always relative** to its parent, which means that the floating actions would clip behind the top nav bar regardless of how high you set their `z-index`: <p align="center"><img src="https://user-images.githubusercontent.com/8698078/222518354-80f1df75-69e5-4433-a256-d0b7dc57cd97.gif"/></p> Therefore, in order to avoid this clipping, the scrollable section had to remain at the top of the app, like so: https://user-images.githubusercontent.com/8698078/222512203-60a88fc5-dd68-47ba-aeab-2425afc60a67.mov <br> In order to keep the benefit of the top query bar remaining in place, the top nav bar was added to a **fixed position** `div` that floats above the contents of the viewport as the user scrolls - this ensures that the floating actions, which are now also positioned via a `fixed` container, can still float above the nav bar while remaining part of the natural order of the HTML tree. As a follow up, we should also address https://github.com/elastic/kibana/issues/152609. ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) |
||
|---|---|---|
| .. | ||
| bfetch_explorer | ||
| content_management_examples | ||
| controls_example | ||
| data_view_field_editor_example | ||
| developer_examples | ||
| embeddable_examples | ||
| embeddable_explorer | ||
| expressions_explorer | ||
| field_formats_example | ||
| files_example | ||
| guided_onboarding_example | ||
| hello_world | ||
| locator_examples | ||
| locator_explorer | ||
| partial_results_example | ||
| portable_dashboards_example | ||
| preboot_example | ||
| response_stream | ||
| routing_example | ||
| screenshot_mode_example | ||
| search_examples | ||
| share_examples | ||
| state_containers_examples | ||
| ui_action_examples | ||
| ui_actions_explorer | ||
| user_profile_examples | ||
| README.asciidoc | ||
[[example-plugins]] == Example plugins This folder contains example plugins. To run the plugins in this folder, use the `--run-examples` flag, via [source,bash] ---- yarn start --run-examples ----